Jquery masonry 砌石与影像镶嵌误差

我将砖石与图像结合在一起，如下所示：

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();
});

但获取错误：未捕获的TypeError:无法读取null的属性“length”

我做错了什么

编辑

我接到两个电话，可能是这导致了问题，另一个是相同的，一个接一个：

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();
});

---

您的JSFIDLE中有多个错误，我假设这些错误也在您的页面中。首先，id是唯一的，不能有多个同名id id=galery项。您在.gallery上的调用是，但是您只有id=gallery，没有class=gallery，最后您设置了itemSelector:“.gallery item”，但是即使您将图形设置为类，您也将其称为galery item

下面是一个类和id设置正确的示例

js:

工作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>

---

发现了一个问题。在这个调用中，我有两个var容器，它们只是互相覆盖。例如，在特定页面中，我只使用了类为.gallery的div，而不是.mashise容器，var容器被不存在的.mashise容器覆盖，因此它返回null。解决办法是：

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

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

---

如图所示：

为什么要在imagesloaded中调用resize？我需要它，我把它放在外面，但没有任何更改您没有提供足够的代码。JSFIDLE会有所帮助。它是一个wordpress站点，所以代码是由gallery生成的，但这里是fiddle中的代码示例，您只能查看js。这只是一个打字错误，wordpress正在生成图库，所以代码中的一切都是一样的。也许问题是我调用了两个砌体函数。画廊和砖石容器，我该怎么做。此外，此错误仅显示在一个页面上，而不显示在其他页面上。事实上，很抱歉没有早点这么做，但这是错误所在的页面，我完全忘记了它是在线的。我看到的一件事是你加载了两次jQuery，这可能是一个问题。这是你应该删除的第二个。第一个是wordpress调用的，如果我删除我的jQuery-latest-min.js，一切都会停止工作。你也可以在任何帖子中输入，看到砌石工作正常，但只有这个页面没有。

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

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