|
1 --- |
|
2 title: Masonry Column Shift |
|
3 layout: default |
|
4 category: custom-layout-modes |
|
5 --- |
|
6 |
|
7 <style> |
|
8 .shifty-item { |
|
9 width: 210px; |
|
10 margin: 10px; |
|
11 float: left; |
|
12 background: #AAA; |
|
13 border: 5px solid white; |
|
14 } |
|
15 |
|
16 .shifty-item:hover { z-index: 10; } |
|
17 |
|
18 .shifty-item.h1 { height: 140px; background: #66F; } |
|
19 .shifty-item.h2 { height: 200px; background: #F66; } |
|
20 .shifty-item.h3 { height: 240px; background: #6F6; } |
|
21 .shifty-item.h4 { height: 280px; background: #FF6; } |
|
22 |
|
23 </style> |
|
24 |
|
25 <section id="copy"> |
|
26 <p>Custom layout mode <code>masonryColumnShift</code>. Enabled columns of a Masonry layout to be shifted and not affect other columns. After the size of an item element has changed, you can trigger a special <code>columnShiftOfItem</code> method that will push the column down. This layout only works with item elements that have the same width</p> |
|
27 |
|
28 {% highlight javascript %} |
|
29 |
|
30 var $container = $('#container'); |
|
31 |
|
32 $container.isotope({ |
|
33 itemSelector: '.shifty-item', |
|
34 layoutMode: 'masonryColumnShift' |
|
35 }); |
|
36 |
|
37 $container.find('.shifty-item').hover( |
|
38 function() { |
|
39 $(this).css({ height: "+=100" }); |
|
40 // note that element is passed in, not jQuery object |
|
41 $container.isotope( 'shiftColumnOfItem', this ); |
|
42 }, |
|
43 function() { |
|
44 $(this).css({ height: "-=100" }); |
|
45 $container.isotope( 'shiftColumnOfItem', this ); |
|
46 } |
|
47 ); |
|
48 |
|
49 {% endhighlight %} |
|
50 |
|
51 </section> |
|
52 |
|
53 |
|
54 <div id="container"> |
|
55 <div class="shifty-item h1"></div> |
|
56 <div class="shifty-item h2"></div> |
|
57 <div class="shifty-item h1"></div> |
|
58 <div class="shifty-item h4"></div> |
|
59 <div class="shifty-item h2"></div> |
|
60 <div class="shifty-item h3"></div> |
|
61 <div class="shifty-item h1"></div> |
|
62 <div class="shifty-item h2"></div> |
|
63 <div class="shifty-item h1"></div> |
|
64 <div class="shifty-item h4"></div> |
|
65 <div class="shifty-item h1"></div> |
|
66 <div class="shifty-item h1"></div> |
|
67 <div class="shifty-item h2"></div> |
|
68 <div class="shifty-item h4"></div> |
|
69 <div class="shifty-item h1"></div> |
|
70 <div class="shifty-item h2"></div> |
|
71 <div class="shifty-item h3"></div> |
|
72 <div class="shifty-item h1"></div> |
|
73 <div class="shifty-item h2"></div> |
|
74 <div class="shifty-item h1"></div> |
|
75 <div class="shifty-item h4"></div> |
|
76 <div class="shifty-item h1"></div> |
|
77 <div class="shifty-item h1"></div> |
|
78 <div class="shifty-item h2"></div> |
|
79 <div class="shifty-item h1"></div> |
|
80 <div class="shifty-item h1"></div> |
|
81 <div class="shifty-item h2"></div> |
|
82 <div class="shifty-item h4"></div> |
|
83 <div class="shifty-item h1"></div> |
|
84 <div class="shifty-item h2"></div> |
|
85 <div class="shifty-item h3"></div> |
|
86 <div class="shifty-item h1"></div> |
|
87 <div class="shifty-item h2"></div> |
|
88 <div class="shifty-item h1"></div> |
|
89 <div class="shifty-item h4"></div> |
|
90 <div class="shifty-item h1"></div> |
|
91 <div class="shifty-item h1"></div> |
|
92 <div class="shifty-item h2"></div> |
|
93 |
|
94 </div> <!-- #container --> |
|
95 |
|
96 |
|
97 <script src="../{{ site.jquery_js }}"></script> |
|
98 <script src="../{{ site.isotope_js }}"></script> |
|
99 <script> |
|
100 |
|
101 |
|
102 // -------------------------- Masonry Column Shift -------------------------- // |
|
103 |
|
104 // custom layout mode |
|
105 $.Isotope.prototype._masonryColumnShiftReset = function() { |
|
106 // layout-specific props |
|
107 var props = this.masonryColumnShift = { |
|
108 columnBricks: [] |
|
109 }; |
|
110 // FIXME shouldn't have to call this again |
|
111 this._getSegments(); |
|
112 var i = props.cols; |
|
113 props.colYs = []; |
|
114 while (i--) { |
|
115 props.colYs.push( 0 ); |
|
116 // push an array, for bricks in each column |
|
117 props.columnBricks.push([]) |
|
118 } |
|
119 }; |
|
120 |
|
121 $.Isotope.prototype._masonryColumnShiftLayout = function( $elems ) { |
|
122 var instance = this, |
|
123 props = instance.masonryColumnShift; |
|
124 $elems.each(function(){ |
|
125 var $brick = $(this); |
|
126 var setY = props.colYs; |
|
127 |
|
128 // get the minimum Y value from the columns |
|
129 var minimumY = Math.min.apply( Math, setY ), |
|
130 shortCol = 0; |
|
131 |
|
132 // Find index of short column, the first from the left |
|
133 for (var i=0, len = setY.length; i < len; i++) { |
|
134 if ( setY[i] === minimumY ) { |
|
135 shortCol = i; |
|
136 break; |
|
137 } |
|
138 } |
|
139 |
|
140 // position the brick |
|
141 var x = props.columnWidth * shortCol, |
|
142 y = minimumY; |
|
143 instance._pushPosition( $brick, x, y ); |
|
144 // keep track of columnIndex |
|
145 $.data( this, 'masonryColumnIndex', i ); |
|
146 props.columnBricks[i].push( this ); |
|
147 |
|
148 // apply setHeight to necessary columns |
|
149 var setHeight = minimumY + $brick.outerHeight(true), |
|
150 setSpan = props.cols + 1 - len; |
|
151 for ( i=0; i < setSpan; i++ ) { |
|
152 props.colYs[ shortCol + i ] = setHeight; |
|
153 } |
|
154 |
|
155 }); |
|
156 }; |
|
157 |
|
158 $.Isotope.prototype._masonryColumnShiftGetContainerSize = function() { |
|
159 var containerHeight = Math.max.apply( Math, this.masonryColumnShift.colYs ); |
|
160 return { height: containerHeight }; |
|
161 }; |
|
162 |
|
163 $.Isotope.prototype._masonryColumnShiftResizeChanged = function() { |
|
164 return this._checkIfSegmentsChanged(); |
|
165 }; |
|
166 |
|
167 $.Isotope.prototype.shiftColumnOfItem = function( itemElem, callback ) { |
|
168 |
|
169 var columnIndex = $.data( itemElem, 'masonryColumnIndex' ); |
|
170 |
|
171 // don't proceed if no columnIndex |
|
172 if ( !isFinite(columnIndex) ) { |
|
173 return; |
|
174 } |
|
175 |
|
176 var props = this.masonryColumnShift; |
|
177 var columnBricks = props.columnBricks[ columnIndex ]; |
|
178 var $brick; |
|
179 var x = props.columnWidth * columnIndex; |
|
180 var y = 0; |
|
181 for (var i=0, len = columnBricks.length; i < len; i++) { |
|
182 $brick = $( columnBricks[i] ); |
|
183 this._pushPosition( $brick, x, y ); |
|
184 y += $brick.outerHeight(true); |
|
185 } |
|
186 |
|
187 // set the size of the container |
|
188 if ( this.options.resizesContainer ) { |
|
189 var containerStyle = this._masonryColumnShiftGetContainerSize(); |
|
190 containerStyle.height = Math.max( y, containerStyle.height ); |
|
191 this.styleQueue.push({ $el: this.element, style: containerStyle }); |
|
192 } |
|
193 |
|
194 this._processStyleQueue( $(columnBricks), callback ) |
|
195 |
|
196 }; |
|
197 |
|
198 $(function(){ |
|
199 |
|
200 var $container = $('#container'); |
|
201 |
|
202 $container.isotope({ |
|
203 itemSelector: '.shifty-item', |
|
204 layoutMode: 'masonryColumnShift' |
|
205 }); |
|
206 |
|
207 $container.find('.shifty-item').hover( |
|
208 function() { |
|
209 $(this).css({ height: "+=100" }); |
|
210 // note that element is passed in, not jQuery object |
|
211 $container.isotope( 'shiftColumnOfItem', this ); |
|
212 }, |
|
213 function() { |
|
214 $(this).css({ height: "-=100" }); |
|
215 $container.isotope( 'shiftColumnOfItem', this ); |
|
216 } |
|
217 ); |
|
218 |
|
219 }); |
|
220 </script> |