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;   } },