Question

I have a grid (3×3) which is 300px and each grid field is 100px wide.

Its very simple to explain if you’ll have a look at jsfiddle here.
Onloads layout isotope its working well, but if you click for example on the li element #2 the grid is going to be resorted, but without using its space correctly.

Why is next to li 3 and empty area? li 4 will fit in there!
Thought isotope will handle this? How to get this?

Thanks for your help!
frgtv10

http://jsfiddle.net/pEZtj/

Answer 1

The problem is with your fit order function. When you click on 2 it sets it’s order to 2.5 (index of 1 + 1.5), which is still less than the order of 4 (index of 3). The same thing applies to 3 which has an order of 2.

To fix this you need a more complex order function. Assuming you only need this to work for four elements the following code should work.

if(index == 0) { //element 1 should appear first
      order = 0;
}
else if ( $item.hasClass('large') && index % 3 == 1 ) {
      order = index + 2.5;
}
else if ( $item.hasClass('large') && index % 3 == 2 ) {
      order = index + 1.5;
}  
else {
      order = index;
}

EDIT: To make the code a little prettier and support any size rows you can make the sort function look like this:

int columns = 3;
if(index % columns == 0) { //element 1 should appear first
      order = index;
}
else if ( $item.hasClass('large')) {
      order = index + columns - (index % columns) + .5;
} 
else {
      order = index;
}