Masonry imagesLoaded不工作

Question

我有过

<div class="js-masonry" data-masonry-options='{ "columnWidth": 50, "itemSelector": ".item", "gutter" : 20 }'>
      <div class="item"><a href="/photo/side-portrait"><img src="/assets/uploads/_default/T96A9589-2.jpg" alt="T96A9589-2" width="909" height="1364"/></a></div>
      <div class="item"><a href="/photo/butterfly"><img src="/assets/uploads/_default/T96A7105-2.jpg" alt="T96A7105-2" width="2046" height="1364"/></a></div>
      <div class="item"><a href="/photo/white-shirt"><img src="/assets/uploads/_default/T96A6883.jpg" alt="T96A6883" width="2046" height="1364"/></a></div>
</div>

使用标准的masonry功能可以工作，但是masonry试图在加载一些图像之前进行布局，所以看起来很混乱。

我试着添加

$(function() {
        var $container = $('.js-masonry');
        // initialize Masonry after all images have loaded
        $container.imagesLoaded( function() {
            $container.masonry();
        });
    });

但这并没有帮助！

问题是我把数据属性和js代码混在一起了吗？或者是其他我看不到的东西？非常感谢您的帮助！

已添加- .item css is

width: 49%;
margin-bottom: 15px;

Answer 1

天哪。问题是我没有包含图片加载的插件。我没有意识到它与砖石图书馆是分开的。笨蛋。

Answer 2

尝试width="100%“，如下所示。在我使用100%的宽度之前，我也有问题。

<div class="js-masonry" data-masonry-options='{ "columnWidth": 50, "itemSelector": ".item", "gutter" : 20 }'>
      <div class="item"><a href="/photo/side-portrait"><img src="/assets/uploads/_default/T96A9589-2.jpg" alt="T96A9589-2" width="100%" height="1364"/></a></div>
      <div class="item"><a href="/photo/butterfly"><img src="/assets/uploads/_default/T96A7105-2.jpg" alt="T96A7105-2" width="100%" height="1364"/></a></div>
      <div class="item"><a href="/photo/white-shirt"><img src="/assets/uploads/_default/T96A6883.jpg" alt="T96A6883" width="100%" height="1364"/></a></div>
</div>