reLayout items with isotope, doesn't seem to maintain structure

Question

I've been playing about with isotope a bit http://isotope.metafizzy.co/demos/relayout.html and have been trying to create a parent container that remains a fixed size, always having 6 smaller items, and reshuffling to fit the 7th larger item.

Here is what I have so far on jsfiddle http://jsfiddle.net/pedalpete/LGBg6/

What I was hoping would happen is that after clicking on any block, the total number of smaller blocks in any one row would be 3.

For some reason, either user .isotope('resize'), or resorting and recreating the isotope as I'm doing, I end up with a number greater than 3 in the top row, so the items are not sorted evenly.

I would have thought that the arrangement would be somewhat static after resorting. Is there a way to have isotope obey the width and height parameters of the binding box??

Solution

See http://jsfiddle.net/desandro/S5vAG/ for my solution.

Is there a way to have isotope obey the width and height parameters of the binding box??

The first step is to disable Isotope resizing the container. Set the resizesContainer option false.

Now to accomplish fitting those blocks into the container, there are several ways to do this. You could build your own layoutMode, or you could try playing around with sorting. This is the solution I employed.

I also used a different layoutMode, fitColumns, which I think better suits what you're going for. Using the getSortData parameter, the logic is that if the item has a class of large AND is an even item, then it gets pushed back into the next column. So 2, 4, 6 all get placed in the next column when they are 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;
  }
},