使用砌体JS代码

Question

我尝试过使用Masonry http://masonry.desandro.com/ JS来让图片互相浮动，但它似乎不起作用。

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

<script>
  $(function(){

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

  });
</script>

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

Answer 1

此处的问题是，您的.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类添加到每个组中的第一个图像，并将其用作选择器。