Css 砌体项目与图像重叠

如果您访问此网站（），您可以看到由于页面加载后加载图像，这些项目正在重叠

我使用以下语法：

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 0, "itemSelector": ".masonry-content" }' >
    <div class="small-12 large-4 columns masonry-content">
        <article>
        ...
        </article>
    </div>
</div>

...

这种方法在缓存图像时效果很好，但在加载内容后加载图像时，会重叠

如何解决这个问题有什么建议吗

谢谢

编辑

jqueryv1.11.1在标题中

我添加了imagesLoaded插件，现在脚本（在页脚中）如下所示：

<script type='text/javascript' src='../masonry.pkgd.min.js'></script>
<script type='text/javascript' src='../imagesloaded.pkgd.js'></script>

<script>
    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.masonry-content',
        columnWidth : 240
      });
    });    
</script>

这两个都被称为，我试图在以下内容上添加砖石结构：

<div id="container">

    <div class="small-12 large-4 columns masonry-content">
        <article>
        ...
        </article>
    </div>

    <div class="small-12 large-4 columns masonry-content">
        <article>
        ...
        </article>
    </div>

    <div class="small-12 large-4 columns masonry-content">
        <article>
        ...
        </article>
    </div>

</div>

...
...
...

我正在使用以下JavaScript触发砌体和imagesLoaded：

<script type="text/javascript">
    var $container = $('#container');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.masonry-content'
      });
    });
</script>

var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.Mashesis内容”
});
});

这不管用

简单地说，我尝试只添加如下砖石：

<script type='text/javascript' src='../masonry.pkgd.min.js'></script>
<script type='text/javascript' src='../imagesloaded.pkgd.js'></script>

<script>
    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.masonry-content',
        columnWidth : 240
      });
    });    
</script>

$（函数（）{
$（“#容器”）。砌体({
//选择权
itemSelector:“.Mashesis内容”，
列宽：240
});
});    

它也不起作用

有什么帮助吗

编辑

---

我已经添加了

class=“js massy”

，现在砌体可以工作了，但所添加的图像不工作。您可以查看本文顶部提供的链接。

您应该等待图像加载，然后激活

砌体。David DeSandro（作者）推荐的插件是，实现简单：

var$container=$（“#container”）

您可以在中看到示例。
添加在中找到的imagesloaded插件

我想我有一个解决办法给你。这行吗


HTML

我没有你的确切设置，所以我很难自己测试。如果这不起作用，我们可以尝试其他方法。
为什么它现在是一个单独的插件？它过去只是一种用砖石包装的方法。你能详细说明一下吗？我可以理解您告诉我使用imagesloaded，但我如何将其集成到我所使用的内容中？这里是一个codepen.io示例，说明他使用imagesloaded-我不会尝试在单击时添加图像。图像就在那里，加载后会重叠。我希望我能让你明白。我不知道用什么代码来解决这个问题。我添加了一个解决方案供您查看。我想我已经解决了。它不会在块中放置“加载微调器”以等待加载，但我认为它是有效的！这对我不起作用，泰勒主义。我已经编辑了这个问题。您需要将倒数第二段代码打包到一个文档中。我注意到你漏掉了。当你说它不起作用时，你的意思是它仍然重叠吗？是的。我的意思是它仍然是重叠的。这个问题解决了吗？您从未报告是否找到有效的解决方案。我们StackOverflow的很多人都想知道。我接受了对我有用的答案。好的。谢谢你的澄清。
$(function() {
  imagesLoaded('#container', function() {
    var $container = $('#container').masonry({
      itemSelector: '.item',
      columnWidth: 200
    });
  });
});