Masonry- div 与 imagesLoaded 插件重叠

Question

我有 Masonry 插件和 Images Loaded 插件，但 imagesloaded 似乎无法正常工作。当我刷新页面时，div 重叠。只有在调整浏览器 window 后，重叠才会自行纠正。有时刷新后它似乎确实有效......它非常随机。我是 jQuery 和 javascript 的新手。

我在这里托管了单个 html 页面，因此您可以看到我在说什么：masonry test

这是我初始化的方式，但是如果您查看上面 link 的源代码，您可以看到完整的代码，因为问题可能出在其他地方。

$(document).ready(function() {

    // Initialize Masonry
    $('#content').masonry({
        columnWidth: 320,
        itemSelector: '.item',
        isFitWidth: true,
        isAnimated: true,
    }).imagesLoaded(function() {
        $(this).masonry('reload');
    }); 
});

Answer 1

问题是 imagesLoaded() 在 masonry 插件完成初始化之前被调用。如果您查看测试页上的浏览器控制台，您会看到一个影响该错误的错误。

查看开发者网站上的 example，了解如何将 imagesLoaded 与 masonry 一起使用。与其链接函数，不如等到图像加载完毕再初始化砌体。

$('#content').imagesLoaded(function() {
    $('#content').masonry({
        columnWidth: 320,
        itemSelector: '.item',
        isFitWidth: true,
        isAnimated: true,
    });
});

您可能能够按照您最初尝试的方式进行操作（即链接方法），但您不能在 imagesLoaded 函数中使用 $(this)。这个函数是一个回调函数，所以它不是同步执行的。如果您将函数更改为

$('#content').masonry('reload');

它可能会按照你想要的方式工作，但我还没有测试过。

Masonry- div 与 imagesLoaded 插件重叠

Masonry- divs overlapping with imagesLoaded plugin

javascript

jquery

html

jquery-plugins

jquery-masonry