砌体和图像加载错误答案

【问题标题】：Masonry and imagesLoaded error砌体和图像加载错误
【发布时间】：2015-05-18 10:09:22
【问题描述】：

我像这样将砌体与 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();
});

【问题讨论】：

你为什么在 imagesloaded 中调用resize()？
我需要它，我把它放在外面，但没有任何改变
您没有提供足够的代码。一个 jsfiddle 会有所帮助。
这是一个wordpress网站，所以代码是生成的gallery，但是这里是fiddle中的代码示例，你只能看js。 jsfiddle.net/n7svvw8b

标签： jquery-masonry imagesloaded

【解决方案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>

【讨论】：

这只是一个拼写错误，wordpress 正在生成图库，所以一切都像你的代码一样。也许问题是我调用了两个砌体功能，对于 .画廊和 .masonry-container，我该怎么做。此外，此错误仅显示在一页上，而不显示在其他页面上。实际上很抱歉没有早点这样做，但这是错误所在的页面，我完全忘记了它的在线。 outdoors.ga/wp/photos
我看到的一件事是你加载了 jQuery 两次，这可能是个问题。这是你应该删除的第二个 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
第一个是 wordpress 调用的，如果我删除我的 jquery-latest-min.js，一切都停止工作。您也可以输入任何帖子，看到砌体工作正常，但仅适用于这个页面没有。

【解决方案2】：

发现一个问题。在砌体电话中，我有两次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'
    });
});

如此处所示：Using jQuery Masonry Many times in the same site

【讨论】：