Кладка и imagesLoaded ошибка

Question

совмещала кладку с imagesLoaded вроде этого:

var container = document.querySelector('.masonry-container'); 
var msnry; 
    // initialize Masonry after all images have loaded 
    imagesLoaded(container, function() { 
     var msnry = new Masonry(container, { 
      itemSelector: '.masonry-item' 
     }).resize(); 
}); 

Но получить ошибку: Uncaught TypeError: Cannot read property 'length' of null

Что я делаю неправильно.

Редактировать

У меня две кладки вызовов, может быть, что вызывает проблемы, еще один такой же, один за другим:

var container = document.querySelector('.gallery'); 
var msnry; 
    // initialize Masonry after all images have loaded 
    imagesLoaded(container, function() { 
     var msnry = new Masonry(container, { 
      itemSelector: '.gallery-item' 
     }).resize(); 
}); 

Answer 1

Нашли проблему. В вызове кладки у меня было var container два раза, которые просто переписывают друг друга. Ex. на определенной странице у меня только что был div с классом .gallery, но не .masonry-container, а var container перезаписан .masonry-container, который не существует, поэтому он возвращает null. Решение:

var $container = $('.masonry-container'); 
    $container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector : '.masonry-item' 
    }); 
}); 

var $container2 = $('.gallery'); 
    $container2.imagesLoaded(function(){ 
    $container2.masonry({ 
     itemSelector : '.gallery-item' 
    }); 
}); 

Как видно здесь: Using jQuery Masonry Many times in the same site

Answer 2

У вас есть несколько ошибок в вашем jsfiddle, которые я предположим, что на вашей странице. Во-первых, идентификаторы уникальны, вы не можете иметь несколько идентификаторов с одинаковым именем (id = "galery-item"). Ваша кладка для звонков на «.gallery», но у вас есть только id = «gallery», no class = «gallery», и, наконец, вы установите свой itemSelector: «.gallery-item», но даже если у вас есть цифры, установленные как класс, вы его назвали galery-item.

Адрес working jsfiddle с правильными значениями для классов и идентификаторов.

ЯШ:

var container = document.querySelector('.gallery'); 
var msnry; 
// initialize Masonry after all images have loaded 
imagesLoaded(container, function() { 
    var msnry = new Masonry(container, { 
     itemSelector: '.galery-item' 
    }); 
}); 

работает HTML:

<div id="gallery" class="gallery"> 
<figure class="galery-item"> 
    <figcaption> 
     <img src="http://placehold.it/150x150"> 
    </figcaption> 
</figure> 
<figure class="galery-item"> 
    <figcaption> 
     <img src="http://placehold.it/150x150"> 
    </figcaption> 
</figure> 
<figure class="galery-item"> 
    <figcaption> 
     <img src="http://placehold.it/150x150"> 
    </figcaption> 
</figure> 
<figure class="galery-item"> 
    <figcaption> 
     <img src="http://placehold.it/150x150"> 
    </figcaption> 
</figure> 
<figure class="galery-item"> 
    <figcaption> 
     <img src="http://placehold.it/150x150"> 
    </figcaption> 
</figure> 
</div>