javascript - 同位素元素的定位

Question

我刚刚为最近的一个元素设置了同位素，并将其添加到我的页面底部

<script type="text/javascript">
$('#isotope').isotope({
layoutMode : 'masonry',
itemSelector : '.isotope-item'
});
</script>

但是，它不起作用。我所有的元素都一个接一个地显示。这就是我在 .isotope-item div 上得到的。只放了一个垂直的定位，没有放水平的。

position: absolute;
left: 0px;
top: 0px;
-webkit-transform: translate3d(0px, 1103px, 0px)

我正在尝试弄清楚这是什么，希望得到任何帮助。

Answer 1

同位素中的砌体布局默认使用第一项的宽度。如果这超过容器宽度的一半，它们将全部显示在一列中。

尝试将宽度设置为一个小数字作为测试:

<script type="text/javascript">
$('#isotope').isotope({
  layoutMode : 'masonry',
  masonry: {
      columnWidth: 5
  }
  itemSelector : '.isotope-item'
});
</script>

非常小的 columnWidth 数字的缺点是同位素会创建更多的列来计算高度，这会更慢并且会占用更多的内存。