我正在使用同位素,并实现了更多加载按钮功能,该功能使用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');
}
}
});
});
}
});
谢谢!