加载更多帖子时，砌体不起作用

Question

the masonry not working in my load more posts. i have tried some like this but it is not working for me. the code Masonry load in the first load and not working

if ($('.more-posts-wrapper .ajax-load-more').length) {
        $('.more-posts-wrapper').off().on('click', '.ajax-load-more a', function(e) {
            e.preventDefault();

            var parent = $(this).parents('.more-posts-wrapper').attr('id');
            parent = '#' + parent;
            var link = $(this).attr('href');

            $(parent+'.more-posts-wrapper').append('<div class="more-posts"></div>');
            content.append(html).masonry('appended', elements);
            $(parent).find('.ajax-load-more').replaceWith('<div class="load-content"><div class="load-circle" data-loader="arrow-circle"></div></div>');
            $(parent).find('.more-posts').load(link + ' '+ parent +' .kitten-ajax-wrapper .post-item, '+ parent +' .ajax-load-more', function() {
            $(parent).find('.more-posts .post-item').hide().detach().appendTo(parent+' .kitten-ajax-wrapper .posts-wrapper').fadeIn(500);
            $(parent).find('.more-posts .ajax-load-more').detach().appendTo(parent+' .kitten-ajax-wrapper .posts-contnet');
            $(parent).find('.more-posts').remove();
            $(parent).find('.load-content').remove();
            });
        });
    }

and my code HTML

<div id="more-posts-wrapper" class="more-posts-wrapper">
    <div class="kitten-ajax-content">
        <div class="kitten-ajax-wrapper">
            <!--Start Posts Wrapper-->
            <div class="blog-posts">
                <?php get_template_part( 'loop/post-style/'.$blog_style.'' ); ?>
            </div>
            <!--End Posts Wrapper-->
            <!--Start pagination Post-->
            <div class="Read-More ajax-load-more pagination-load-more">
                <?php echo get_next_posts_link('<span>Load More</span> <span><i class="fa fa-refresh"></i></span>',100); ?>
            </div>
            <!--End pagination Post-->
        </div>
    </div>
</div>

Masonry code

// Masonry
jQuery(document).ready(function($){
    var $container = $('.masonry-layout');
    $container.masonry({
        itemSelector: '.post-item',
        layoutMode: 'masonry',
        resizesContainer: false,
        percentPosition: true,
        isAnimated: true,
    });
});

Answer 1

you must use appended method with $container. And I cannot see here $(".masonry-layout") class. BTW you can use imageLoaded plugin to get best result. Also masonry has reloadItems utility. 2. Where did you get content variable in this line content.append(html).masonry('appended', elements);