php - jQuery Masonry 追加与无限滚动重叠

Question

所以，我有这个允许无限滚动的脚本：

$(document).ready(function() {
        function last_id_funtion() {
            var ID = $(".elemento:last").attr("id");
            $.post("2HB.php?action=get&id=" + ID,
                    function(data) {
                        if (data != "") {
                            var $boxes = $(data);
                            //$(".elemento:last").after(data);
                            $("#corpo").append($boxes).masonry('appended', $boxes, 'reloadItems');

                        }
                    });
        };

        $(window).scroll(function() {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                last_id_funtion();
            }
        });

它基于 2 个查询，一个用于前 10 个结果，另一个用于其余结果。问题是 Masonry 会重叠图像直到页面刷新完成...当图像存储在缓存中时，它可以正常工作，但不能正常工作...我该如何解决这个问题？

Answer 1

尝试将您的砌体调用包装在 .imagesLoaded()

$("#corpo").imagesLoaded(function(){
  $("#corpo").append($boxes).masonry('appended', $boxes, 'reloadItems');
});

编辑

根据Masonry 附录 “imagesLoaded 通过在所有子图像加载后触发回调来工作。” . 因此，如果您运行，则在此回调中触发 Masonry，它需要执行的所有操作都应该已经加载。