Demo

<h3 lay-toc="{id: 'examples', level: 2}" class="layui-hide">滚动加载</h3> <pre class="layui-code" lay-options="{preview: true, text: {preview: '滚动加载'}, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div class="flow-demo" id="ID-flow-demo"></div> <!-- import layui --> <script> layui.use(function(){ var flow = layui.flow; // 流加载实例 flow.load({ elem: '#ID-flow-demo', // 流加载容器 scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。 done: function(page, next){ // 执行下一页的回调 // 模拟数据插入 setTimeout(function(){ var lis = []; for(var i = 0; i < 8; i++){ lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>') } // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多 next(lis.join(''), page < 10); // 此处假设总页数为 10 }, 520); } }); }); </script> </textarea> </pre> <h3 id="demo-manual-load" lay-toc="{level: 2}">手动加载</h3> <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div class="flow-demo" id="ID-flow-demo-manual"></div> <!-- import layui --> <script> layui.use(function(){ var flow = layui.flow; // 流加载实例 flow.load({ elem: '#ID-flow-demo-manual', // 流加载容器 scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。 isAuto: false, isLazyimg: true, done: function(page, next){ // 加载下一页 // 模拟插入 setTimeout(function(){ var lis = []; for(var i = 0; i < 6; i++){ lis.push('<li></li>') } next(lis.join(''), page < 6); // 假设总页数为 6 }, 520); } }); }); </script> </textarea> </pre>