CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
frgtv10
frgtv10

Reputation: 5460

Isotope Grid layout use empty space

I have a grid (3x3) 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/

Upvotes: 0

Views: 795

Answers (1)

Jon Kelly
Jon Kelly

Reputation: 316

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

Upvotes: 1

Related Questions