Question

我有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');
    }); 
});

Answer 1

问题是在砌体插件完成初始化之前调用了imagesLoaded()。如果您在测试页面上查看浏览器控制台，则会看到相应的错误。

请查看开发人员网站上的example，了解如何将图像与砌体一起使用。您应该等到图像加载到初始化砌体时，而不是链接功能。

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

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

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

它可能以您想要的方式工作，但我还没有对此进行测试。

Masonry-divs与imagesLoaded插件重叠

1 个答案: