layui加载流java实现

效果图：

导入layui的css和js文件

    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>

加载流容器

        <ul class="flow-default" id="LAY_demo1"></ul>

在容器中加载内容，通过向后台请求，发送page（页数），加载的条数获取内容

  flow.load({
            elem: '#LAY_demo1' //流加载容器
            ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,done: function(page, next){ //执行下一页的回调

                //模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    var str = "";
                    $.get('${pageContext.request.contextPath}/HotProjects.action?page='+page+ '&limit=8', function(res){


                        //假设你的列表返回在data集合中
                        layui.each(res.data, function(index, item){
                            var day=getday(item.startdate,item.deadline);
                            //alert(day);
                            var image="/file/"+item.image;
                            //达成率
                            var num=item.needmoney/item.supmoney;
                            num = num.toFixed(2)*100;
                            str=' <li class="hot_list"><img class="hot_img" src="'+image+'"/>'
                            +'  <div class="hot_content clearfix">'
                            +' <span class="tag_conduct hot_tag fr"></span>'
                            +' <p class="hot_title">'+item.name+'</p>'
                            +'<p class="hot_summary">'+item.introduce+'</p>'
                            +'<ul class="clearfix">'
                            +' <li class="hot_money fl">已筹集<br /><span>'+item.supmoney+'</span></li>'
                            +'<li class="hot_people fl">已支持<br /><span>'+item.numsup+'</span></li>'
                            +' <li class="hot_time fl">剩余天数<br /><span>'+day+'</span></li></ul>'
                            +'<div class="hot_bar_wrapper"><img style="width:78%;" class="hot_bar" src="${pageContext.request.contextPath}/images/hot_bar.jpg"/></div>'
                            +'<span class="hot_rate_wrapper fl">达成率：<span class="hot_rate">'+num+'%</span></span> '
                            +' <a href="${pageContext.request.contextPath}/HotProject.action?id='+item.id+'" class="hot_support fr"></a>'
                            +'</ul>'
                            +'</div>'
                            +'</li>'
                            ;
                            lis.push(str);
                        });

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

后台
分页实体类

package com.lzm.utils;

/**
 * @author lzm
 * @create 2019- 06- 05- 9:25
 */
public class PageResult<T> {

    private String msg;
    //返回的数据
    private  T data;
    private  int code;
    //总记录数
    private  int count;


    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public PageResult(String msg, T data, int code, int count) {
        this.msg = msg;
        this.data = data;
        this.code = code;
        this.count = count;
    }
}

Controller

//显示全部的热门产品，使用layui流加载
    @RequestMapping(value="/HotProjects.action",method = RequestMethod.GET)
    @ResponseBody
    public PageResult<List<Project>> HotProjects(int page , int limit) {

        //会自动传入limit和page
        System.out.println("11111111111111111111111111111111111111111111111111");
        System.out.println(page);
        System.out.println(limit);
//     分页查询，需要参数code（要为0，不然数据表格数据显示不出）,msg（返回的消息），data(表格显示的数据)，totals(查询到数据的总记录数)，
        List<Project> projectList = projectService.listProjectByPageAndLimit(page, limit);
        System.out.printf(projectList.toString());
        //返回的总记录数
        int count = projectService.findProjectPageCount();
        PageResult<List<Project>> listPageResult = new PageResult<List<Project>>("", projectList, 0, count);
        return listPageResult;
    }

Service层

 @Override
    public List<Project> listProjectByPageAndLimit(int page, int limit) {
        ProjectExample projectExample=new ProjectExample();
        int start=(page-1)*limit;
       projectExample.setOrderByClause("id limit "+start+","+limit);
        List<Project> projects = projectMapper.selectByExample(projectExample);

        return projects;
    }

    @Override
    public int findProjectPageCount() {
        ProjectExample projectExample=new ProjectExample();
        List<Project> projects = projectMapper.selectByExample(projectExample);
        int size = projects.size();
        return size;
    }