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>

使用标准砌体功能可以正常工作，但是砌体试图在加载某些图像之前进行布局，因此它看起来很乱。

我尝试添加

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

但它没有帮助！

问题是我混合了数据属性和js代码吗？或者是我看不到的东西？非常感谢任何帮助！

已添加 - .item css

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

Answer 1

啧。问题是我没有包含imagesloaded插件。我没有意识到它与砌体库是分开的。强烈抵制。

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>

砌体图像加载不起作用

2 个答案: