Question

我将砌体与图像相结合，如下所示：

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。

这是一个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>

Answer 2

发现问题。在砖石召唤中，我有var container两次，只是相互覆盖。防爆。在特定页面中，我只有div .gallery而不是.masonry-container，而var container被.masonry-container覆盖，而null不存在，因此返回{{1 }}。解决方案是：

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

砌体和图像加载错误

2 个答案: