砌体和图像加载错误

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

您的jsfiddle中有多个错误，我认为您的页面中也有。首先，id是唯一的，您不能有多个相同名称的id (id=" gallery -item")。你的呼叫砖石"。但你只有id="gallery"，没有class="gallery"，最后你设置你的itemSelector: '。Gallery-item '，但即使你把这些图形设置为一个类，你也叫它Gallery-item。

这是一个正确设置了类和id的工作jsfiddle。

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>

Answer 2

发现问题。在砌体调用中，我有两次var container，它们只是相互覆盖。例如，在特定页面中，我只具有类.gallery而不是.masonry-container的div，并且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'
    });
});

在同一站点多次使用jQuery砌筑