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

Question

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

如果你想在这里看一看jsfiddle，它很容易解释。Onloads布局同位素运行良好，但如果您单击例如li元素#2，网格将被重新排序，但没有正确使用其空间。

为什么li 3旁边有空白区？li 4正好可以放进去！你以为同位素能解决这个问题？如何获得此功能？

谢谢你的帮忙!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;
}