Question

我正在使用masonry.js来实现我网站上的砌体效果。但是我很难将图像堆叠在适当的位置以获得无间隙布局。我确保所有图像都裁剪成合适的尺寸，以便它们完美贴合，但我仍然会有间隙。任何帮助都会很棒！非常感谢你！

到目前为止，这是指向该网站的链接：http://zechnelson.com/missionsme

Answer 1

你错过了初始化砌体吗？

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

-------------------------- OR -------------------- ------

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, itemSelector": ".item" }'></div>

Answer 2

两个代码之间有“OR”，您已在页面上粘贴了两个代码！你是新手吗？

此外，您使用的是UL＆gt; LI结构，而文档指示使用基于div的布局，如下所示。

<div id="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>

还在样式表中添加类“item”，如下所示：

.item { width: 25%; }

请参阅http://jsfiddle.net/souviiik/GkTL6/

处的POC

砌体没有正确堆叠

2 个答案: