Макетный макет загружается с высотой 0px

Question

Я пытаюсь загрузить изображения в простой масонский макет. Сначала загружаются изображения, и похоже, что кладка применяет высоту: 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

Если вы осмотрите HTML в Masonry docs, вы заметили, что IMG являются всегда завернуты внутри дел. Просто окружайте свои img с помощью div.

<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.