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

Question

我正在尝试将图像加载到一个简单的 masonry.js 布局中，首先加载图像，看起来砌体正在将 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 中。只需用 divs.

包围您的 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>

参见codepen。

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

Masonry layout is loading with height 0px

javascript

jquery

masonry