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

我有一个网格（3×3），它是300px，每个网格字段是100px宽。

如果你在这里看看jsfiddle，它很容易解释。 Onloads布局同位素它运行良好，但是如果你点击li元素＃2上的网格将被采用，但没有正确使用它的空间。

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

谢谢你的帮助！ frgtv10

http://jsfiddle.net/pEZtj/

Answer 1

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

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

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