javascript - 在我的代码中使用 masonry JS

Question

我已经尝试应用 Masonry http://masonry.desandro.com/ JS 使图像在彼此下方浮动，但它似乎不起作用。

我使用了以下功能 - 我做错了什么？CSS问题可能吗？

<script>
  $(function(){

    $('.cycler-wrap').masonry({
      itemSelector: '.cycler-container',
      columnWidth: 100
    });

  });
</script>

根据下面 Kelvin 的回复更新了网站。现在只是一个循环问题:(

score 0 · Accepted Answer

这里的问题是您的.cycle-container元素是 0 像素高，因为您的img元素是绝对定位的，这会将它们从文档流中取出。

如果您改为制作.cycler img元素position:relative，砌体应该按预期工作。由于您的图像是display:inline，要保持循环器工作，您实际上只需要制作第一张图像position:relative：

.cycler img{
    position: absolute;
    top:0;
    left:0;
}

.cycler img:first-child{
    position:relative;
}

当然，并不是所有的浏览器都支持:first-child，所以最好只.first为每个组中的第一个图像添加一个类并将其用作选择器。

1 回答 1