同位素网格布局使用空白空间 [英] Isotope Grid layout use empty space

问题描述

我有一个300x的网格(3x3)，每个网格字段的宽度为100px.

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

如果您要在此处查看 jsfiddle ，这很容易解释. Onloads布局同位素可以很好地工作，但是例如，如果单击li元素#2，则将重新使用网格，但不会正确使用其空间.

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.

为什么在li 3和空白区域旁边? li 4将适合其中！ 以为同位素会解决这个问题?如何获得?

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

感谢您的帮助！ frgtv10

Thanks for your help! frgtv10

http://jsfiddle.net/pEZtj/

推荐答案

问题出在您的健身单功能上.当您单击2时，它的顺序设置为2.5(索引为1 + 1.5)，但仍小于4的顺序(索引为3).同样的情况适用于3，其阶数为2.

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

为了使代码更漂亮并支持任何大小的行，您可以使sort函数如下所示:

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

这篇关于同位素网格布局使用空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！