wp/wordpress 实现瀑布流(masonry布局)无限加载(infinite-scroll+imagesloaded)

由于想开发一个瀑布流主题，我历经3周时间，在国内外各大论坛及度娘等网站查找资料，一遍遍的测试、实践，终于功夫不负有心人，用代码实现了瀑布流布局+无限触底加载的功能，可谓是呕心沥血，怎一个累字了得！下面分享记录瀑布流开发的代码及心得！

一、首先说一下必备js插件

1.masonry瀑布流布局插件
布局插件：http://www.jq22.com/jquery-info362
2.infinite-scroll无限加载插件
插件官方：https://infinite-scroll.com/#masonry-isotope-packery
3.imagesloaded图片加载插件
插件官方：https://imagesloaded.desandro.com/

二、wp主循环+masonry实现布局

1.主循环html代码：

<?php if(have_posts()) : ?>
<div class="container">  
<div id="masonry" class="container-fluid">  
	<?php while (have_posts()) : the_post(); ?>	
		<div class="box masonry-item">
			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
				<img src="<?php echo get_the_post_thumbnail_url(); ?>">
			</a>  
		</div>
	<?php endwhile; ?>
	</div>	
</div>
<?php else : ?>
<!-- 没有列表 -->
<div class="block">
当前列表为空，尚未发布！
</div>

<?php endif; ?>
<!-- 分页 -->
<?php pageNavLink();?>  

2.在footer底部引入masonry插件及js代码

<script src="<?php echo get_template_directory_uri(); ?>/static/js/water.js" type="text/javascript"></script>
<script>
$(function() {
    var $container = $('#masonry');
    $container.imagesLoaded(function() {
        $container.masonry({
                itemSelector: '.box',
                gutter: 20,
                isAnimated: true,
            });
     });
});
</script> 

完成这一步，你会发现你的页面已经实现瀑布流布局了！，效果如下：

三、实现瀑布流无限加载功能

底部引入imagesloaded和infinite-scroll两个插件，并修改我们的js代码：

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/static/js/infinite-scroll.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) { 
	var $grid = $('#masonry').masonry({
	navSelector: '#pages',
	nextSelector: '#pages .pages_next', //下一页选择器
	itemSelector: ".box", //下一页中需要被加载进当前页的块
	gutter: 20,
	itemSelector: '.masonry-item',
	});
	var msnry = $grid.data('masonry'); 
	$grid.infiniteScroll({
	path: '#pages .pages_next',
	history: false,
	append: '.masonry-item',
	outlayer: msnry,
	});
});
</script> 

刷新页面，发现还是不可以，最开始我在wp后台设置的分页是3和5，发现不能触底，也就是页面高度没有到浏览器的底部，不会触发加载图片的js，因此我调整到10，果然，可以动态加载数据了！

还有一点，上面是我多次试验成功的代码，特别是最后的js，需要你根据自己的元素id和class修改，否则不生效，除非你的html代码和我的一样，那没问题，绝对可以用！

对了，上面还有一段分页代码，无限加载需要配置“下一页”的class，wp自带的下一页没有class，就在functions里面动态加入了class了，代码如下：

//给下一页添加类
add_filter('next_posts_link_attributes', 'posts_link_attributes');
// add_filter('previous_posts_link_attributes', 'posts_link_attributes');
function posts_link_attributes() {
  return 'class="pages_next"';
}
//分页代码
function  pageNavLink( $range = 4 ) {
    global $paged,$wp_query;
    if ( !$max_page ) {
        $max_page = $wp_query->max_num_pages;
    }
    if( $max_page >1 ) {
        echo "<div id='pages'>"; 
        if( !$paged ){
            $paged = 1;
        }
        if( $paged != 1 ) {
            echo "<a href='".get_pagenum_link(1) ."' class='extend' title='跳转到首页'>首页</a>";
        }
        previous_posts_link('上一页');
        if ( $max_page >$range ) {
            if( $paged <$range ) {
                for( $i = 1; $i <= ($range +1); $i++ ) {
                    echo "<a href='".get_pagenum_link($i) ."'";
                if($i==$paged) echo " class='current'";echo ">$i</a>";
                }
            }elseif($paged >= ($max_page -ceil(($range/2)))){
                for($i = $max_page -$range;$i <= $max_page;$i++){
                    echo "<a href='".get_pagenum_link($i) ."'";
                    if($i==$paged)echo " class='current'";echo ">$i</a>";
                    }
                }elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){
                    for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){
                        echo "<a href='".get_pagenum_link($i) ."'";if($i==$paged) echo " class='current'";echo ">$i</a>";
                    }
                }
            }else{
                for($i = 1;$i <= $max_page;$i++){
                    echo "<a href='".get_pagenum_link($i) ."'";
                    if($i==$paged)echo " class='current'";echo ">$i</a>";
                }
            }
        next_posts_link('下一页'); 
        if($paged != $max_page){
            echo "<a href='".get_pagenum_link($max_page) ."' class='extend' title='跳转到最后一页'>尾页</a>";
        }
        echo '<span>共'.$max_page.'页</span>';
        echo "</div>\n";  
    }
}

到此结束，历经三周的难题终于突破了，心里美滋滋！