砌體和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>