砌体图像加载不工作答案

【问题标题】：Masonry imagesLoaded not working砌体图像加载不工作
【发布时间】：2014-12-08 02:27:32
【问题描述】：

我有

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

【问题讨论】：

你能提供 .item 的 CSS 属性吗？
我已经为你更新了问题。
您是否尝试从 -Tags 中删除宽度和高度属性？

标签： javascript html jquery-masonry masonry

【解决方案1】：

嘘。问题是我没有包含 imagesloaded 插件。我没有意识到它与 Masonry 库是分开的。推特。

【讨论】：

【解决方案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>

【讨论】：

嗯，不是没有任何影响。