jquery-masonry - 砌体和图像加载错误

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'，即使您将数字设置为类，你有它称为galery-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两次只是相互覆盖。前任。在特定页面中，我只有 div 与 class.gallery但不是.masonry-container，并且被不存在的 divvar container覆盖，所以它返回。解决方案是：.masonry-containernull

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

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

如此处所示：在同一站点中多次使用 jQuery Masonry