最近写了一个个人博客项目，博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样，每次加载一页的数据显示，只是加载的方式不同。LayUI流加载的官方文档地址：https://www.layui.com/doc/modules/flow.html
 
首先在HTML页面中定义一个存放加载内容的标签（页面样式可以根据自己需求进行调试）:
 
<ul class="flow-default" id="LAY_demo1"></ul>
 
使用JS根据上面给定的标签，渲染插入数据。代码如下。
 
layui.use('flow', function(){
  var flow = layui.flow;
 
  flow.load({
    elem: '#LAY_demo1', //流加载容器
    scrollElem: '#LAY_demo1', //滚动条所在元素，一般不用填
    done: function(page, next){ //执行下一页的回调
      
      //模拟数据插入
      setTimeout(function(){
            var lis = [];
            //数据请求地址，page，第几页，默认page是从2开始返回
            $.post('blog/fysj2',{page:page},function(res){
        	layui.each(res.data, function(index, item){
        		//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //流加载插入内容部分，根据自己需求更改，这里做的案例，所以就写的比较简单
 	            lis.push("<div class='list-group'><a href='#' class='list-group-item' onclick='details("+item.id+")'>"+
 	                		"<h4 class='list-group-item-heading'>"+item.title+"</h4><p class='list-group-item-text'>"
 	                		+item.user.nickname+"   |   "+item.createDate+
 	                		"</p></a>"+
 	                		"</div>");
 	          }); 	   	       
             //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
            next(lis.join(''), page < res.pages); //假设总页数为 10
            $('[data-toggle="tooltip"]').tooltip()
        });  
      });
    }
  });
 
后台请求响应方法。分页查询，查询完返回给前台
 
@RequestMapping(value="/fysj")
@ResponseBody
public Object fysj(Integer page, BlogsForm form) {
	Sort sort=Sort.by(Sort.Direction.DESC, "updateDate");
	//分页，页数从0开始的，所以需要-1，每页10条数据
	Pageable pageable = PageRequest.of(page-1, 10, sort);
	Page<Blogs> blog;
	//查询
	Specification<Blogs> spec = buildSpec2(form);
	blog = blogService.findAll(spec, pageable);
	return FlowloadUtils.buildResult(blog);
}
 
返回的JSON数据类型工具类FlowloadUtils：
 
public class FlowloadUtils {

	public static HashMap<String, Object> buildResult(Page page) {
		HashMap<String, Object> result=new HashMap<>();
		result.put("code", 0);
		result.put("msg","");
		result.put("pages", page.getTotalPages());
		result.put("data", page.getContent());
		return result;
	}
}
 
页面加载效果如下：
 
 
加载完成后：
 

这是开发小白的一篇记录，希望能给跟我一样的小白带来一点灵感哈哈。
 
这是HTML代码：
 
<div class="layui-row search_div">
	<input type="text" name="sech" autocomplete="off" placeholder="搜索" class="layui-input search_text" id="title_cen">
	<button type="button" class="layui-btn layui-btn-sm" id="txtSearch"><i class="layui-icon layui-icon-search"> </i></button>
</div>

<div class="layui-card-body">
	<ul class="flow-default article_list " id="LAY_demo1">
	</ul>
</div>
 
这是JS代码：
 
 <script>
  layui.use(['element', 'flow', 'util'], function () {
  var carousel = layui.carousel
  , element = layui.element
  , util = layui.util;
  var title = $("#title_cen").val();
  //流加载
  var flow = layui.flow; 
  
  flowload();
  
  //搜索
  $("#txtSearch").click(function () {
    title = $("#title_cen").val();
    $("#LAY_demo1").html("");
    flowload();
  })
  
  function flowload() {
     flow.load({
     elem: '#LAY_demo1' //流加载容器
     , done: function (page, next) { //执行下一页的回调
     var info = { pageIndex: page, title: title }
     $.ajax({
        url: "/NewsList/GetViewNewsForFlowLoad",
        type: "post",
        data: JSON.stringify(info),
        contentType: "application/json",
        success: function (data) {
          var json = JSON.parse(data);
          var html = [];
          if (json.Err == 0) {
            html.push(json.Msg);
            next(html.join(''), page < json.Data);
          } else {
            layer.msg(json.Msg, {
            icon: 2,
            time: 4000
            })
          }
        }, error: function (xhr) {
          layer.msg(xhr.responseText, {
           icon: 2,
           time: 4000
          })
        }
      });//ajax结束
    }
  });
 }
});
</script>

layui流加载模块自定义【加载更多】
 
首先看看是引用的哪个，如果是这个layui.all.js，那就找到这个文件。
 
<script src="/static/common/layui-v2.5.6/layui.all.js " media="all "></script>
 

 然后找到一段代码，加上那段style就可以。
 
d="<cite>加载更多。。。</cite>",h=l('<div class="layui-flow-more"  style="clear:both;position:relation;margin-top:30px;padding-top:50px;margin-bottom:30px"><a href="javascript:;">'+d+"</a></div>");
 
效果如下：
 
 其他正常。
 

LayUI流加载的官方文档地址
 
首先下载layui的架包
把下载好架包的文件取出，放入到项目中，我这里使用的是idea
 

 
 
3.在HTML页面中定义一个存放加载内容的标签
 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<meta http-equiv="Expires" content="0">
<meta http-equiv="kiben" content="no-cache">
<html>
<head>
    <title>${select.stitle}</title>
    <link rel="stylesheet" href="<%=path%>/statics/css/readBook.css">
</head>
<body>


<div id="content">
    <h4>${select.stitle}</h4>
    <p id="p">
        ${select.scontent}
    </p>
</div>

<link rel="stylesheet" href="<%=path%>/statics/layui/css/layui.css"/>
<script src="<%=path%>/statics/layui/layui.js"></script>
<script src="<%=path%>/statics/js/jquery-1.12.4.min.js"></script>
<script>
    layui.use('flow', function(){
        var flow = layui.flow;

        flow.load({
            elem: '#content' //流加载容器
            ,mb:50
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];

                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('<%=path%>/select/findSelectContent/'+page+'/'+${bid}, function(res){
                    //假设你的列表返回在data集合中
                    layui.each(res.list, function(index, item){
                        lis.push("<h4>"+ item.stitle +"</h4><hr>"+
                        "<p id='p'>"+item.scontent+"</p><hr>");
                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.total);
                });
            }
        });

    });
</script>
<script src="<%=path%>/statics/js/readBook.js"></script>
</body>
</html>

 
后台代码
 
@RequestMapping("/findSelectContent/{page}/{bid}")
    public @ResponseBody PageInfo<Select> findSelectContent(@PathVariable Integer page,@PathVariable Integer bid){
        PageHelper.startPage(page, 1);
        PageInfo<Select> pageInfo=new PageInfo<Select>(selectService.getFindSeArticleById(bid));
        return pageInfo;
    }
 
效果图如下
 

 以上就是layui流加载的使用过程了