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

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

如果你看一下这里，解释起来很简单。 Onloads布局可以正常工作，但如果您单击

li

元素2，网格将被重设，但没有正确使用其空间

为什么在

li

3和空白区域旁边<代码>li4将适合那里！ 你认为同位素能解决这个问题吗？如何得到这个

谢谢你的帮助！ frgtv10

---

问题在于您的fit order功能。当您单击2时，它将其顺序设置为2.5（索引为1+1.5），这仍然小于4（索引为3）的顺序。同样的道理也适用于顺序为2的3

要解决这个问题，您需要一个更复杂的order函数。假设您只需要将其用于四个元素，那么下面的代码应该可以工作

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

---

你能给我一个提示，如何处理6个

li

项目吗？要使其成为动态的，您是希望在一个大元素上方的行中显示5个元素，还是希望在一个大元素上显示两行三个元素。我发布的代码应该适用于任意数量的三行。为了使其动态化，我认为执行顺序=索引+行大小-索引%rowSize+.5应该可以工作网格总是像3宽3高。没有动态方式吗？我发布的编辑应该是动态的。只需将列设置为3，并确保容器的宽度/高度足够，这将按预期工作！非常感谢你。您知道如何使用jquery sortable实现这一点吗？要按其他顺序对对象进行排序吗？