jfinal结合layui完成页面的流加载

    瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

    简单的说，就是页面加载到最下方的时候，获取数据然后动态显示到页面上，好处是对不用一次性加载很多数据，减轻服务器压力，另一个也符合用户使用习惯，增强用户体验。

 flow.load({
      elem: '#flow' //指定列表容器
      ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
        var lis = [];
        
		        //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
		        $.get('../blog/flowArticle/'+page, function(res){
		 
		          //假设你的列表返回在data集合中
		            var data = res;	
		            var getTpl = $('#flowdemo').html();
		            laytpl(getTpl).render(data, function(html){
		            	 lis.push(html);
		            })
		             next(lis.join(''), page< res.totalPage);  
		            
		        });
      }
    });

直接贴代码。这段代码的意思，通过ajax获取数据，当触发流加载的时候，page值加1，然后动态解析json，通过当 通过layTpl(前段模板引擎)渲染页面，当page<totalPage的时候停止加载。

后台

 public void flowArticle(){
		Integer page = getParaToInt(0);
		Page<XArticle> article = p.article.pageArticleAList(page, 6);
		renderJson(article);
	 }

layTpl的使用

//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="demo" type="text/html">
  <h3>{{ d.title }}</h3>
  <ul>
  {{#  layui.each(d.list, function(index, item){ }}
    <li>
      <span>{{ item.modname }}</span>
      <span>{{ item.alias }}：</span>
      <span>{{ item.site || '' }}</span>
    </li>
  {{#  }); }}
  {{#  if(d.list.length === 0){ }}
    无数据
  {{#  } }} 
  </ul>
</script>
 
//第二步：建立视图。用于呈现渲染结果。
<div id="view"></div>
 
//第三步：渲染模版
var data = { //数据
  "title":"Layui常用模块"
  ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
}
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
  view.innerHTML = html;
});

这是我完成的效果。