砌体和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两次，只是相互覆盖。防爆。在具体页面我刚刚与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是唯一的，你不能有多个同名的id（id =“galery-item”）。您在“.gallery”上调用砌体，但您只有id =“gallery”，no class =“gallery”，最后设置itemSelector：'.gallery-item'，但即使您将数字设置为类，你有它称为galery-item。

这里是一个working jsfiddle与类和id的设置正确。

JS：

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>