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??

score 18 · Accepted Answer · answered Feb 24 '11 at 17:01

18

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

answered Feb 24 '11 at 17:01

desandro

2,854
1
22
31

Fantastic answer! I have a question about this concept: Would you be able to resize the .items that aren't clicked on rather than shift the position of the divs. I'm looking for something similar to this: http://www.adidas.com/us/homepage.asp – Tom Jul 14 '11 at 02:54
@Tom Yes, you could try to implement whatever logic you wanted to handle layouts via a custom layout mode. See http://isotope.metafizzy.co/docs/extending-isotope.html – desandro Jul 14 '11 at 15:43
Would I be able to collapse the items rather than have the window switch around? I see that you can have custom layouts, so I would be able to lay out the images in the order I want them, but how would I resize the items? – Tom Jul 14 '11 at 16:22
Great demo, almost what I'm looking for. However, would it be possible to re-position enlarged item to 1st position? Similar to the effect used www.jwt.com. Thanks in advance – Mars Mellow Dec 05 '12 at 04:15
@desandro ,out of context here but. Can plugin support multiple selection. i mean resorting can be on multiple values. i had tried this with checkboxs but no fruits .. – joshua Aug 30 '13 at 13:42
@desandro I have purchased commercial license of isotope. I am facing similar issue. Is it possible to do above stuff without setting "layoutmode" as "fitColumns". I need "layoutmode" as "masonry" and items in last row to be expanded upwards by reordering them. reference: http://stackoverflow.com/questions/19513303/how-to-get-last-row-in-isotope-and-on-click-expand-them-upward-direction – Pravin W Oct 23 '13 at 11:32

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

1 Answers1