砌体与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，它只是相互覆盖。例如。在特定的页面中，我使用了类.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砌体

Answer 2

您的“小提琴”中有多个错误，我认为这些错误也在您的页面中。首先，id是唯一的，您不能有多个同名的id (id="galery-item")。你在".gallery“上调用砖石，但是你只有id=”图片库“，没有class=”图片库“，最后你设置了你的itemSelector：‘.图片库-项目’，但是即使你把数字设置为一个类，你也有一个叫做galery-item的。

下面是一个具有正确类和id设置的工作小提琴。

联署材料：

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>