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

时间:2021-07-31 22:20:47

  效果就如我的个人站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;
}