layui 流加载

第一步引入js文件

<link href="/layui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/layui.all.js"></script>

第二步布局

<div class="contian">
      <div class="content">
            <div class="lr flow-default"></div>
        </div>
    </div>

第三步js

 var openid = "{$openid}";
   var token = "{$token}";
   var page = 1;
   layui.use('flow', function () {
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        flow.load({
            elem: '.lr' //指定列表容器
            , isAuto:true,
            scrollElem: '.lr',done: function (page,next) {
               var url = "接口地址";
             //传递的参数
                var data = {
                    openid: openid,
                    token: token,
                    page: page
                }
                var lis = [];
                $.get(url, data, function (params) {
                    var list = params.list;
                    var sum = params.count_page;
                    var list1 = '';
                   var word = "要跳转的html";
                    for (var index = 0; index < list.length; index++) {
                        var l = list[index];
                     lis.push('<a href="'+word +'" style="background: #fff;" class="lr1 clearfix">' +
                            '<img id="img" src="' + l.pic_url + '" alt="">' +
                            '<div class="zj clearfix">' +
                            '<span class="keer">' + l.author + '</span>' +
                            '<span class="keer1">' +
                            '<img id="img1" src="{:C('WEIXIN_IMAGE')}yan.png" alt="">' +
                                '<span id="pp">' + l.view + '</span>' +
                                '</span>' +
                                '</div>' +
                                '<div class="pi clearfix">' +
                                '<span>' + l.title + '</span>' +
                                '</div>' +
                                '</a>')
                      
                    }
                   
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < sum);
                });
            }
        });