Masonry.js, похоже, не работает

Question

Я ввожу некоторые изображения динамически, а затем применяю к ним плагин масонства. Тем не менее, изображения по-прежнему отображаются в строках на странице с большим количеством свободного пространства под более короткими изображениями, чтобы сделать их равными высоте более высоких изображений. Я бы хотел, чтобы они соединились в стиле кладки. Кто-нибудь знает, что я делаю неправильно, пожалуйста? Можете ли вы использовать масонство, если вы создаете html динамически?

JQuery:

$.getJSON(school + "/data.json", function(data) { 
    $('.images').empty(); 

    var images; 
    images = data.images; 
    captions = data.captions; 
    videos = data.videos; 
    var imgCount = images.length; 
    $.each(images, function(key, value) { 
    var caption = data.captions[key]; 
    $('.images').append('<div class="img-container"><div class="myitem"><img src="' + school + '/img/' + value + '" ><div class="caption">' + caption + '</div></div></div>'); 
    $('.images').masonry({ 
     columnWidth: 300, 
     itemSelector: '.img-container' 
    }); 
    }); 
}); 

CSS:

.caption { 
    color: lightgray; 
    font-size: 90%; 
    float: left; 
    clear:both; 
    margin: 0 10px 20px 10px; 
    max-width: 300px; 
} 
.myitem { 
    max-width: 300px; height: auto; margin: 10px; 
} 
.myitem img { 
    max-width: 300px; 
    height: auto; 
} 

Answer 1

Вам нужно позвонить .masonry на родительском-элементного ваших IMG-контейнеров (для этого также за пределами $ .each)

Пример HTML:

<div id="container"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    ... 
</div> 

Пример JS:

$('#container').masonry({...});