定位同位素项目

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数字的缺点是同位素会为高度计算创建更多列，这会更慢并且会占用更多内存。