砌體佈局與高度加載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。