砌体项目重叠图像

Question

如果您访问此网站 (http://www.infismash.com/)，您会看到由于图像是在页面加载后加载的，所以项目重叠了。

我正在使用以下语法：

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

当图像被缓存时，这个效果很好，但当图像在加载砌体内容后加载时，它会重叠。

有什么解决这个问题的建议吗？

谢谢。

编辑

jQuery v1.11.1 在 header.

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

<script type='text/javascript' src='../masonry.pkgd.min.js'></script>
<script type='text/javascript' src='../imagesloaded.pkgd.js'></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 来触发砌体和图像加载：

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

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

这行不通。

简而言之，我试过只添加这样的砌体：

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

也不行。

有什么帮助吗？

编辑

我添加了 class="js-masonry" <div id="container">，现在砌体工作正常，但 imagesLoaded 不工作。您可以查看此 post.

顶部提供的 link

Answer 1

您应该等待图像加载然后激活 Masonry。 David DeSandro（作者）推荐的插件是imagesloaded，实现很简单：

var $container = $('#container');

$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.box'
    });
});

您可以在 Masonry docs 查看示例。

Answer 2

添加在 http://desandro.github.io/imagesloaded/

找到的 imagesloaded 插件

我想我有适合您的解决方案。这个有用吗？

http://codepen.io/tylerism/pen/LVeNKa

HTML

<h1>Masonry + imagesLoaded</h1>
<div id="container">
  <img class="item" src="http://placebear.com/300/300" />
  <img class="item" src="http://placebear.com/500/300" />
  <img class="item" src="http://placebear.com/300/500" />
  <img class="item" src="http://placebear.com/300/300" />
  <img class="item" src="http://placebear.com/500/300" />
  <img class="item" src="http://placebear.com/300/500" />
  <img class="item" src="http://placebear.com/300/300" />
  <img class="item" src="http://placebear.com/500/300" />
  <img class="item" src="http://placebear.com/300/500" />
  <img class="item" src="http://placebear.com/300/500" />
  <img class="item" src="http://placebear.com/300/300" />
  <img class="item" src="http://placebear.com/500/300" />
  <img class="item" src="http://placebear.com/300/500" />
  <img class="item" src="http://placebear.com/300/500" />
  <img class="item" src="http://placebear.com/300/300" />
  <img class="item" src="http://placebear.com/500/300" />
  <img class="item" src="http://placebear.com/300/500" />
</div>

JS

$(function() {
  imagesLoaded('#container', function() {
    var $container = $('#container').masonry({
      itemSelector: '.item',
      columnWidth: 200
    });
  });
});

我没有你的确切设置，所以我很难自己测试。如果这不起作用，我们可以尝试其他方法。

砌体项目重叠图像

Masonry items overlap images

css

wordpress

masonry