使用Jetpack无限滚动（&P）；同位素（砌体）。
我面临的一个问题是，在每一个新的ajaxed帖子之后，我需要destroy 然后build 同位素布局。如果我不采用这种方法，那么每次由无限卷轴加载的新帖子集都不会被同位素布局视为自己的帖子集，它们也会错过同位素样式。所以我每次都要重建同位素post-load 无限滚动触发。
这种方法实际上给用户留下了一种轻弹效果，并滚动到同位素布局的开头。
//In functions.php
function vg_infinite_scroll_init() {
add_theme_support( \'infinite-scroll\', array(
\'container\' => \'row-wrap\',
\'type\' => \'scroll\',
\'render\' => \'loop_p_arch_infinite_scroll_render\',
\'footer\' => false,
\'footer_widgets\' => false,
\'wrapper\' => false,
\'posts_per_page\' => 9,
) );
}
add_action( \'after_setup_theme\', \'vg_infinite_scroll_init\' );
function loop_p_arch_infinite_scroll_render() {
while( have_posts() ) {
the_post();
get_template_part( \'content\', \'product\' );
}
}
function vg_get_prod_arch_posts( $post_type = \'post\' ) {
$prodarch_posts = get_posts( array(
\'numberposts\' => 9,
\'paged\' => get_query_var( \'paged\' ),
\'post_type\' => $post_type
) );
return $prodarch_posts;
}
// In archive-product.php
<!-- Isotope Grid -->
<section id="product_list">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="grid" id="row-wrap">
<div class="grid-sizer"></div>
<?php
$products = vg_get_prod_arch_posts( \'product\' );
if ( ! empty( $products ) ) {
foreach ( $products as $product ) {
setup_postdata( $GLOBALS[\'post\'] = $product );
get_template_part( \'content\', \'product\' );
}
wp_reset_postdata();
}
?>
</div>
</div>
</div>
</div>
</section>
//In content-product.php
global $post;
?>
<div class="grid-item post product">
<div class="item_content">
<a href="#">
<div class="item_name">
<h4><?php the_title(); ?> </h4>
</div>
<?php echo get_the_post_thumbnail( $post->ID, \'large\', array( \'class\' => \'image_width_set\' ) ); ?>
</a>
</div>
</div>
//In JS file
jQuery(document).on("post-load", function(e) {
jQuery(\'.grid\').isotope(\'destroy\');
jQuery(\'.grid\').isotope({
itemSelector: \'.grid-item\',
percentPosition: true,
masonry: {
columnWidth: \'.grid-sizer\',
gutter: 5
}
});
});
jQuery(window).load(function(){
jQuery(\'.grid\').imagesLoaded(function() {
jQuery(\'.grid\').isotope({
itemSelector: \'.grid-item\',
percentPosition: true,
masonry: {
columnWidth: \'.grid-sizer\',
gutter: 5
}
});
})
})
最合适的回答,由SO网友:iantsch 整理而成
通常同位素允许添加新项目，然后重新布置砌体：
在JS文件的某个地方，您应该将要附加的元素放入变量中，例如。new_elements
jQuery(\'.grid\').append(new_elements)
.isotope(\'appended\', new_elements)
.imagesLoaded( function() {
jQuery(\'.grid\').istotope(\'layout\');
});
资料来源：
http://isotope.metafizzy.co/methods.html这个解决方案要感谢@vajrasar的最后润色
回显网格页面循环时，添加以下内容：
function loop_p_arch_infinite_scroll_render() {
$paged = get_query_var( \'paged\', 1 );
?>
<div id="page-<?=$paged?>">
<?php while( have_posts() ) {
the_post();
get_template_part( \'content\', \'product\' );
}
?>
</div>
<script id="script-page-<?=$paged?>">
jQuery(\'document\').ready(function($) {
var new_elements = $(\'#page-<?=$paged?>\').children(\'.grid-item\');
$(\'.grid\')
.append(new_elements)
.isotope(\'appended\', new_elements)
.imagesLoaded( function() {
$(\'.grid\').isotope(\'layout\');
});
$(\'#page-<?=$paged?>, #script-page-<?=$paged?>\').remove();
});
</script>
<?php
}
