砌体图像加载不起作用

Masonry imagesLoaded not working

本文关键字：不起作用 加载 图像      更新时间：2023-09-26

我有

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

Sheesh。问题是我没有包含图像加载插件。我没有意识到它与砌体图书馆是分开的。嘲笑。

尝试 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>
相关文章：