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位于标题中。

我添加了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来触发砌体和imagesLoaded：

<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无效。您可以查看本文顶部提供的链接。

Answer 1

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

var $ container = $（＆＃39;＃container＆＃39;）;

$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
    });
  });
});

我没有确切的设置，所以我自己很难对其进行测试。如果这不起作用，我们可以尝试别的。

砌体物品重叠图像

2 个答案: