使用同位素-使用ajax调用加载更多按钮

时间:2018-07-23 15:11:10

标签: jquery ajax wordpress jquery-isotope jquery-masonry

我正在使用同位素,并实现了更多加载按钮功能,该功能使用ajax调用加载下一页文章。每当加载第二页时,第二页的项目就会显示在当前项目的后面(重叠,并且JS不会应用于新页面中的项目),但是我无法在新帖子中进行同位素更改。 / p>


同位素Jquery函数:

$(document).ready(function() {
    blogIsotope();
});

//-------------- Blog Isotope  --------------//
blogIsotope = function() {
    var blog_container = $('.blog-masonry .items-list');
    blog_container.imagesLoaded( function(){
        blog_container.isotope({
            itemSelector: 'article',
            masonry: { columnWidth: '.grid-sizer' }
        });
    });
};


Ajax功能:

jQuery(function($){

    // For Load More Button
    if ( $('.blog-items').hasClass('load-more-pagination') ) {

        $('.page-pagination .load-more').click(function(){
            var button = $(this),
                text = $(this).text(),
                data = {
                'action': 'loadmore',
                'query': za_loadmore_posts_params.posts,
                'page' : za_loadmore_posts_params.current_page
            };

            var container = $('.blog-masonry .items-list');

            $.ajax({
                url : za_loadmore_posts_params.ajaxurl,
                data : data,
                type : 'POST',
                beforeSend : function ( xhr ) {
                    button.text('Loading ...');
                },
                success : function( data ){
                    if( data ) {
                        container.append( data );
                        button.text( text );
                        za_loadmore_posts_params.current_page++;

                        container.imagesLoaded( function() {
                            container.isotope({
                                itemSelector: 'article',
                                masonry: { columnWidth: '.grid-sizer' }
                            });
                        });

                        container.find('article').addClass('visible-item');

                        if ( za_loadmore_posts_params.current_page == za_loadmore_posts_params.max_page ) 
                            button.text( 'No More Post' ).removeClass('load-more').addClass('no-more');
                    } else {
                        button.text( 'No More Post' ).removeClass('load-more').addClass('no-more');
                    }
                }
            });
        });

    }

});


谢谢!

0 个答案:

没有答案