javascript - 砌体-div与imagesLoaded插件重叠

我有Masonry插件和Images Loaded插件，看来imagesloaded无法正常工作。当我刷新页面时，div重叠。仅在调整浏览器窗口的大小之后，重叠部分才会自行纠正。有时刷新后似乎确实有效……这是非常随机的。我是jQuery和javascript的新手。

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

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

$(document).ready(function() {

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

最佳答案

问题在于在砌筑插件完成初始化之前，正在调用imagesLoaded()。如果您在测试页的浏览器控制台中查看，则会看到一个错误提示。

看一下开发人员网站上的example，了解如何使用结合砌筑的imagesLoad。与其链接功能，不如等待图像加载完成初始化砌体。

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

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

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

它可能会按您想要的方式工作，但我尚未对此进行测试。