0

我刚刚为最近的一个项目设置了同位素，并在我的页面底部添加了这个

<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)

我试图弄清楚这是什么，并希望得到任何帮助。

4

1 回答 1

1

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

尝试将宽度设置为一个较小的数字作为测试：

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

一个非常小的columnWidth数字的缺点是同位素创建了更多的列用于高度计算，这更慢并且使用更多的内存。

于 2013-05-16T13:33:45.233 回答