Question

砌筑不能在我的负载更多的帖子。我试过这样的一些但是它不适合我。代码砌体在第一次加载时加载而不能正常工作

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();
            });
        });
    }

和我的代码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
jQuery(document).ready(function($){
    var $container = $('.masonry-layout');
    $container.masonry({
        itemSelector: '.post-item',
        layoutMode: 'masonry',
        resizesContainer: false,
        percentPosition: true,
        isAnimated: true,
    });
});

Answer 1

您必须使用appended方法$container。我在这里看不到$(".masonry-layout")课。顺便说一下，你可以使用imageLoaded插件来获得最佳效果。砌体也具有reloadItems效用。 2.您在哪一行content

获得content.append(html).masonry('appended', elements);变量

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

1 个答案: