jquery - reLayout items with isotope, doesn't seem to maintain structure -
i've been playing isotope bit http://isotope.metafizzy.co/demos/relayout.html , have been trying create parent container remains fixed size, having 6 smaller items, , reshuffling fit 7th larger item.
here have far on jsfiddle http://jsfiddle.net/pedalpete/lgbg6/
what hoping happen after clicking on block, total number of smaller blocks in 1 row 3.
for reason, either user .isotope('resize'), or resorting , recreating isotope i'm doing, end number greater 3 in top row, items not sorted evenly.
i have thought arrangement static after resorting. there way have isotope obey width , height parameters of binding box??
see http://jsfiddle.net/desandro/s5vag/ solution.
is there way have isotope obey width , height parameters of binding box??
the first step disable isotope resizing container. set resizescontainer option false
.
now accomplish fitting blocks container, there several ways this. build own layoutmode, or try playing around sorting. solution employed.
i used different layoutmode, fitcolumns
, think better suits you're going for. using getsortdata
parameter, logic if item has class of large
, item, gets pushed next column. 2, 4, 6 placed in next column when big.
getsortdata : { fitorder : function( $item ) { var order, index = $item.index(); if ( $item.hasclass('large') && index % 2 ) { order = index + 1.5; } else { order = index; } return order; } },
Comments
Post a Comment