ajax后如何应用砌体

Question

点击 "BuddyPress" 的 "Activity Page" 中的 "Load More" 后，我想将 "Masonry.js" 应用到 activity 列表。

我为此编写了以下代码，但是 $ grid.masonry 在单击 "Load More" 后不起作用。

(function($){

    if($('#activity-stream').length){

        var observer = new MutationObserver(function (MutationRecords, MutationObserver) {

            var $grid = $('.grid').masonry({ 
                itemSelector: '.grid-item',
                isFitWidth: true,
                isAnimated: true,
                columnWidth: 620,
            }); 

            $grid.masonry(); // don't work
            $grid.masonry('reloadItems'); // don't work
            $grid.masonry('layout'); // don't work

        });

        observer.observe($('#activity-stream').get(0), {
            childList: true,
        });

    }

})(jQuery);

如果我添加 span 等元素并使用 settimeout ，如下所示，"Masonry.js" 将起作用，但这是不合适的。

(function($){

    if($('#activity-stream').length){

        $('body').on("click",'.load-more',function(){
            $('#activity-stream').prepend('<span></span>');
        }); 

        var observer = new MutationObserver(function (MutationRecords, MutationObserver) {

            var $grid = $('.grid').masonry({ 
                itemSelector: '.grid-item',
                isFitWidth: true,
                isAnimated: true,
                columnWidth: 620,
            }); 

            setTimeout(function(){
                $grid.masonry();
                $grid.masonry('reloadItems');
                $grid.masonry('layout');
            },5000);    

        });

        observer.observe($('#activity-stream').get(0), {
            childList: true,
        });

    }

})(jQuery);

我完全迷失在生活中，不知道该怎么办...

如能详细说明，将不胜感激。

谢谢。

Masonry.js:https://github.com/desandro/masonry

Answer 1

当您完成添加到 DOM 的元素后（可能使用 AJAX 调用），然后在您的 Masonry 实例上调用 .layout() 方法。不要多次初始化 Mansory，并在文档就绪事件中进行。参见 https://masonry.desandro.com/methods.html
如果你可以 post 页面，HTML 也许我可以符合我的要求答案，这取决于使用的 Wordpress 主题。
Observer的定义应该是可以的在 AJAX 调用后执行，因此未检测到突变

ajax后如何应用砌体

How to apply masonry after ajax

javascript

buddypress

jquery-masonry