-
Notifications
You must be signed in to change notification settings - Fork 16
/
masonry.javascript.txt
87 lines (79 loc) · 6.79 KB
/
masonry.javascript.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
MASONRY
new Masonry(ELEM|SELECTOR[,OBJ]) #Make ELEM children form a masonry grid according to their width and height.
#Returns MASONRY
#Version 3.2.2
#OBJ:
# - columnWidth NUM|ELEM|SELECTOR (def: JQ.outerWidth of first child): should use
# ELEM|SELECTOR with percentage sizing
# For nice effect: choose sizes with a common denominator (e.g. 50px), then choose it
# as columnWidth
# - isFitWidth BOOL (def: false): if true and columnWidth NUM or not percentage sizing,
# resize ELEM width to fit children
# - gutter NUM|ELEM|SELECTOR (def: 0): space between columns. For vertical gutter, use
# CSS margin
# - containerStyle OBJ|null (def: { position: "relative" }): CSS applied to ELEM
# - hiddenStyle OBJ (def: { opacity: 0, transform: "scale(0.001)" }): CSS applied to
# children when hide() them
# - visibleStyle OBJ (def: { opacity: 1, transform: "scale(1)" })
# - transitionDuration STR (def: "0.4s")
# - isInitLayout BOOL (def: true): initialize the layout right away.
# If false, must manually call MASONRY.layout()
# or MASONRY.layoutItems(MASONRY_ELEM_ARR[, BOOL]) (false to disable transitions)
# Loading images|fonts in children can cause problems sometimes (overlapping items), in
# which case, should wait for imagesLoaded(ELEM|JQ, FUNC()) callback to layout()
# - isResizeBound BOOL (def: true): update layout on window resize
# Can undo|redo with MASONRY.[un]bindResize()
# - isOriginLeft|Top BOOL (def: true): order of the stacking from left to right,
# top to bottom
# - itemSelector SELECTOR: hide not matching children
# - stamp ELEM[_ARR]|NODELIST|SELECTOR: matching children will not layout as masonry grid,
# keep their own layout, but will push masonry grid out of it
# Can manually MASONRY.[un]stamp(ELEM[_ARR]|NODELIST)
#To change width|height of children while adapting layout, must be thin wrapper around
#their own child, which is animated.
class="js-masonry"
data-masonry-options="OBJ" #Same as HTML attributes. To return MASONRY, do Masonry.data(ELEM)
JQ.masonry(OBJ) #Same as jQuery. To return MASONRY, do JQ.data("masonry")
#MASONRY.FUNC(...) -> JQ.masonry(FUNC_STR,...)
MASONRY.getItemElements() #Returns ELEM_ARR
MASONRY.getItem(ELEM) #Returns MASONRY_ELEM, with attributes:
# - element ELEM
# - position: x|y NUM
# - size:
# - [inner|outer]width|height NUM
# - padding|border|marginBottom|Top|Left|RightWidth
# - isBorderBox BOOL
# - layout:
# - columnWidth NUM, gutter NUM
# - cols NUM
# - containerWidth NUM, element ELEM
# - items ELEM_ARR
# - size OBJ
MASNRY.addItems|appended|prepended
(ELEM[_ARR]|NODELIST) #
MASNRY.remove(ELEM[_ARR]|NODELIST)#
MASONRY.reloadItems() #Must be called when items have changed (e.g. with addItems())
MASONRY.layout() #Must be called when MASONRY properties have changed, or after reloadItems()
MASONRY.hide(MASONRY_ELEM_ARR) #Must call MASONRY.layout() after transition ended. Called when items are removed.
MASONRY.reveal(MASONRY_ELEM_ARR) #Inverse
MASONRY.destroy() #
MASONRY.on|off(...) #Only for MASONRY events. For once(), must return true
MASONRY.on("layoutComplete",
FUNC(MASONRY, MASONRY_ELEM_ARR)) #
MASONRY.on("removeComplete",
FUNC(MASONRY, MASONRY_ELEM_ARR)) #
ANGULAR-MASONRY ==> #MODULE "wu.masonry".
# - directive "masonry" on parent, with attributes:
# - masonry-options="OBJ_EXPR"
# - column-width, item-selector: like columnWidth, itemSelector (def: 10,
# ".masonry-brick")
# - reload-on-show: calls MASONRY.layout() if parent hidden then shown, in case a
# window resize happened in-between
# - don't forget itemSelector on children. Usually use ng-repeat too.
#Uses imagesLoaded() to avoid layout problems.
#Version 0.11.0
OTHER SIMILAR PACKAGES ==> #Not open source:
# - isotope: Masonry + sorting|filtering methods
# - packery: more compact layout