javascript - 同位素网格布局使用空白空间

Question

我有一个 300 像素的网格 (3x3)，每个网格字段都是 100 像素宽。

如果你在这里看看jsfiddle ，解释起来很简单。Onloads layout isotope 它工作得很好，但是如果你点击例如li元素#2，网格将被重新使用，但没有正确使用它的空间。

为什么旁边是li3 和空白区域？li4将适合那里！认为同位素会处理这个？如何得到这个？

谢谢你的帮助！frgtv10

http://jsfiddle.net/pEZtj/

Answer 1

问题在于您的适合订单功能。当您单击 2 时，它会将其阶数设置为 2.5（索引 1 + 1.5），这仍然小于阶数 4（索引 3）。同样的事情也适用于阶数为 2 的 3。

要解决此问题，您需要一个更复杂的订单功能。假设您只需要它来处理四个元素，那么下面的代码应该可以工作。

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

编辑：要使代码更漂亮并支持任何大小的行，您可以使排序函数如下所示：

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