Как применять кладку после AJAX - PullRequest
Новая
       39

Как применять кладку после AJAX

0 голосов
/ 20 октября 2018

После нажатия «Загрузить еще» на «Странице действий» в «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

1 Ответ

0 голосов
/ 20 октября 2018
  • Когда вы завершите добавление ваших элементов в DOM (возможно, с помощью вызова AJAX), затем вызовите метод .layout() в вашем экземпляре Masonry .Не инициализируйте Mansory более одного раза и делайте это на мероприятии Document Ready.См. https://masonry.desandro.com/methods.html
  • Если Вы можете опубликовать страницу, с помощью HTML, возможно, я смогу уточнить свой ответ, это зависит от используемой темы Wordpress.
  • Должно быть возможно, что определениеObserver выполняется после вызова AJAX, поэтому мутация не обнаружена
...