砌体布局与高度加载0px

Question

我试图加载图像到一个简单的masonry.js布局，图像加载第一，它看起来像石工正在应用高度：0px到网格和网格项目。任何想法为什么发生这种情况？这里是我使用的js和一个codepen。

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> 

请参阅codepen。