砌体布局正在加载高度为 0px

Question

我正在尝试将图像加载到一个简单的 masonry.js 布局中，首先加载图像，看起来 masonry 正在将 height: 0px 应用于网格和网格项目。 知道为什么会这样吗？ 这是我正在使用的 js 和一个代码笔。

http://codepen.io/kathryncrawford/pen/WwGVNa

JS

jQuery(function ($) {

var $container = $('.js-grid').imagesLoaded( function() { 

console.log("images are loaded");
    $container.masonry({
        itemSelector : '.js-masonry',
        columnWidth: 100
    });
    });
});

Answer 1

如果您检查Masonry docs 中的 HTML，您会注意到 img 总是包含在 div 中。 只需用 div 包围你的 img。

<div class="js-grid">
    <div class="js-masonry">
        <img src="http://www.placecage.com/200/600" alt="">
    </div>
    <div class="js-masonry">
        <img src="http://www.placecage.com/400/200" alt="">
    </div>
    <div class="js-masonry">
        <img src="http://www.placecage.com/100/200" alt="">
    </div>
    <div class="js-masonry">
        <img src="http://www.placecage.com/200/200" alt="">
    </div>
    <div class="js-masonry">
        <img src="http://www.placecage.com/200/300" alt="">
   </div>
</div>

见代码笔。