流程:

1. 页面初始化时,调用插件进行一次排版；

2. 当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示

3. 重复2,直到无数据

Html代码:

复制代码 代码如下:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Action代码：

复制代码 代码如下:

//初始化的数据 
public function lists(){  
$data = D('Info')->order('id DESC')->limit(10)->select(); 
$this->assign('data', $data); 
$this->display(); 
} 
//获取一次请求的数据 
public function getMore(){  
//获取最后一个id 
if(!emptyempty($_GET['lastid']))$map['id'] = array('lt', $_GET['lastid']);  
$data = D('Info')->where($map)->order('id DESC')->limit(10)->select(); 
$this->ajaxReturn($data); 
}

注意:通过判断窗口是否滚动到页面底部来决定用ajax加载一次数据,如果不做处理,会一下子请求很多次,所以,要使用条件来限制.

这里使用的是往一个元素上赋值 $("#loading").data("on", true);,在请求期间判断是true则不继续请求,然后在页面请求完成后再赋值为false.