砌体和图像加载错误

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="galery-item")。你在“.gallery”上调用砌体，但你只有 id="gallery"，没有 class="gallery"，最后你设置了你的 itemSelector: '.gallery-item'，甚至如果您将数字设置为 class，则将其称为 galery-item。

这是 working jsfiddle，其中 classes 和 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>

Answer 2

发现问题。在砌体调用中，我有两次 var container，这只是互相覆盖。前任。在特定页面中，我只有 div 和 class .gallery 而不是 .masonry-container，var container 被 .masonry-container 覆盖，不存在，所以它 returns 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

砌体和图像加载错误

Masonry and imagesLoaded error

jquery-masonry

imagesloaded