jquery - Jquery Masonry 仅在第二次单击时适用于 ajax 加载的内容

Question

我正在使用 .load 在我的页面上加载内容，并且我使用 Masonry 插件显示图像。然而，砌体只是在第二次点击加载内容时才开始。有问题的页面是http://ashevilleapothecary.info/上的照片页面， 这里稍微精简了代码：

$(".navpage").click(function(){
    $("#floodcontent").load("photos.txt");
});

$(document).ajaxComplete(function(){
    $('#photobox').masonry({
        itemSelector: '.photo'
    });
});

任何帮助表示感谢，谢谢！

Answer 1

Masonry 不知道更改（新图像加载），因为没有回调函数来“提醒”masonry 再次组织页面。

使用 imagesLoaded 插件选项。加载图像后，这将触发回调函数，然后图像将不再重叠。

http://masonry.desandro.com/docs/intro.html#imagesloaded_plugin