Question

我有一个300 xx的网格（3x3），每个网格字段的宽度为100px。

如果您在这里查看jsfiddle，可以非常简单地解释一下。 Onloads布局同位素工作得很好，但是如果你点击li元素＃2上的网格，将会使用网格，但不能正确使用它的空间。

为什么li 3旁边是空白区域？ li 4适合那里！思想同位素会处理这个吗？怎么弄这个？

感谢您的帮助！ frgtv10

Answer 1

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

要解决这个问题，您需要一个更复杂的订单功能。假设您只需要使用它来处理四个元素，则以下代码应该可以正常工作。

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函数看起来像这样：

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

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

1 个答案: