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

【问题标题】：Masonry layout is loading with height 0px砌体布局正在加载高度 0px
【发布时间】：2016-03-14 17:17:57
【问题描述】：

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

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

jQuery(function ($) {

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

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

【问题讨论】：

您的 CodePen 在 Chrome 和 Firefox 中都对我说“正在加载......”。
这很奇怪...试试这个链接？ codepen.io/kathryncrawford/full/WwGVNa
技术上你不会“看到”任何东西。但它也不应该说正在加载。

标签： javascript jquery masonry

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

见codepen。

【讨论】：