Masonry + Ajax 实现无限刷新瀑布流

　　效果就如我的个人站yooao.cc，把我实现的思路分享给大家。

　　Masonry渲染页面如果有图片时需要imagesLoaded辅助，不然有可能会造成布局重叠。

　　一个大体的思路：前端取得最后一篇文章的id，下拉时进行Ajax请求添加文章进布局，并同时更新最后一篇文章的id，这样就可往复循环实现无限瀑布流刷新。

　　下面说说具体的实现：

一、前端

　　对于Masonry  的基本布局，可以看它的文档。

　　在页面第一次渲染时，我在容器底部设计一个添加按钮：

<a id="add-button" href="<?php echo Url::to(['post/site/addpost','type_id'=>$type_id,'last_id' => $last_id]) ?>" class="btn btn-danger">加载更多</a>

　　因为我用的Yii2框架，所以Yii2提供的方法生成href，生成的href就像这样:http://yooao.cc/index.php?r=post/site/addpost&last_id=71

，type_id是对指定类别的文章添加时需要的，last_id就是最后一篇文章的id。

　　下面是具体的js代码：

$(function(){

var add_href = $('#add-button').attr('href');
var patt = /\d+$/g;
var last_id = patt.exec(add_href)[0];//取得last_id的值

$('#add-button').hide(); //如果不想显示这个添加按钮，可以将它隐藏
var add_ajax_count = 0;  //定义一个计数器，避免下拉到底时短时间内进行多次Ajax请求
$(window).on('scroll',function(){
     
     //计数器为0并且滚动条离底部小于10px时,才会进行Ajax请求
    if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 && add_ajax_count == 0 ) {
        add_ajax_count++;  //请求一次则将计数器+1
        $.ajax({                 
                type: "post",  
                url: $('#add-button').attr('href'),  
                dataType: "json",  
                async: true,  
                data: {'last_id' : last_id},  //提供给控制器last_id
                beforeSend: function(){                
                $('#ajax-loader').show();        //加载时显示的图片        
                },
                complete: function(){
                $('#ajax-loader').hide();
                },
                success: function (posts) {      
                     

                   var count_post =  posts.length;
              
                    if(count_post == 0 ){
                        return false;
                    }
     //将last_id变更为此次请求的最后一篇文章的id
                    last_id = posts[posts.length-1].id;   
               
               (function(){
                    var i = 0;
    // 这里设置每0.9秒添加一个小块。如果不用计时器而用for，我测试结果是会造成重叠。
                    setInterval(function(){
                    if(i >= count_post){
                        return false;
                    }
                    
                    //$elem是每个小块的模版
                    var $elem = $('<div class="grid-item" >' + posts[i].title + '</div>');    
                           
                    $grid.append($elem);

                    //等图片加载完后才渲染新添加的小块
                    $elem.imagesLoaded( function() {                             
                    $grid.masonry('appended', $elem );               
                    });
                    i++;
                },900); 
            })() 
            
  //8是我设置的每次添加的文章数，如果此次得到的文章数小于8说明已经到最后，count_post 的值将会为1，之后再下拉不会触发Ajax请求。 
            if(count_post < 8 ){
                    return false;
                }else{
                    add_ajax_count--;  
                }
               }                  
        });         
    }
});


});

 

 

 

二、后端

用Yii2举例，控制器代码：

 

   public function actionAddpost($type_id=null)
    {
        $model = new Post();  
        $posts = $model->addPost($type_id);       
        return json_encode($posts);
    
    }

 

 

 

post模型的addPost方法：

 

public function addPost($type_id=null)
    {
        if($_POST['last_id'] !== null){
            $last = $_POST['last_id'];
        }
        if($type_id == null){
            $posts = Post::find()->where('status = 1 AND id < :id',[':id' => $last])->orderBy('id DESC')->limit(POST::PRE_PAGE_POST)->asArray()->all();           
        }else{
            $posts = Post::find()->where('id < :id AND type_id = :type_id AND status = 1',[':id' => $last,':type_id'=>$type_id])->orderBy('id DESC')->limit(POST::PRE_PAGE_POST)->asArray()->all();
             
        }

        return $posts;
    }