Question

在“ BuddyPress”的“活动页面”中单击“加载更多”后，我要将“ Masonry.js”应用于活动列表。

我为此编写了以下代码，但是单击“加载更多”后$ grid.masonry不起作用。

(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
如果您可以发布页面，则可以使用HTML来限定我的页面答案，取决于使用的Wordpress主题。
观察者的定义可能已经被在AJAX调用之后执行，因此未检测到突变

ajax后如何申请砌体

1 个答案: