layui.flow(layui的流加载)，图片懒加载，炒鸡好用哦~

目录

1. 前言
2. flow模块参数：官方说明
3. 案例代码

前言

读完本文您将了解到：layui的滚动流加载，手动流加载，以及图片的懒加载。

滚动加载：拖动右边的滚动条，即可获取新的数据
手动加载：点击【加载更多】，即可获取新的数据
图片懒加载：始终加载当前屏的图片，减轻网站因为大量图片可能带来的压力。

先来看下最终的效果图。

layui.flow官方api文档

flow模块参数：官方说明

elem	指定列表容器的选择器
scrollElem	滚动条所在元素选择器，默认document。如果你不是通过窗口滚动来触发流加载，而是页面中的某一个容器的滚动条，那么通过该参数指定即可。
isAuto	是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。
end	用于显示末页内容，可传入任意HTML字符。默认为：没有更多了
isLazyimg	是否开启图片懒加载。默认false。如果设为true，则只会对在可视区域的图片进行按需加载。但与此同时，在拼接列表字符的时候，你不能给列表中的img元素赋值src，必须要用lay-src取代
done	到达临界点触发加载的回调。信息流最重要的一个存在。携带两个参数：done: function(page, next){}
图片懒加载的elem	指定开启懒加载的img元素选择器，如 elem: ‘.demo img’ 或 elem: ‘img.load’

案例代码

主要注意elem，scrollElem，isAuto，isLazyimg，end，done这些参数的含义，在上面已经说明。
滚动加载时：isAuto这个值不需要，因为默认是true，意思是自动加载。
手动加载：isAuto赋值为false，关闭自动加载。end也可以赋值下，当没有数据时，会显示end赋值的提示语。
图片懒加载：列表中的img元素赋值src，必须要用lay-src取代。始终加载当前屏的图片，减轻网站因为大量图片可能带来的压力。
注：以下代码可参考layui官方代码示例

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>滚动加载</legend>
</fieldset>
<ul class="flow-default" style="height: 100px;" id="LAY_demo1"></ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>手动点击加载</legend>
</fieldset>

<ul class="flow-default" style="height: 100px;" id="LAY_demo2"></ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>图片懒加载</legend>
</fieldset>
<%--以下图片都是本地图片--%>
<div class="site-demo-flow" id="LAY_demo3">
    <img lay-src="../image/1.jpg">
    <img lay-src="../image/2.jpg">
    <img lay-src="../image/3.jpg">
    <img lay-src="../image/4.jpg">
    <img lay-src="../image/5.jpg">
    <img lay-src="../image/6.jpg">
    <img lay-src="../image/7.jpg">
    <img lay-src="../image/8.jpg">
    <img lay-src="../image/9.jpg">
    <img lay-src="../image/10.jpg">
</div>
<script src="layuiadmin/layui/layui20200514.js"></script>
<script src="layuiadmin/layui/layui.all.20200514.js"></script>
<script>
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#LAY_demo1' //流加载容器
            , scrollElem: '#LAY_demo1' //滚动条所在元素选择器
            ,end:'亲，没有更多数据了哦'
            , done: function (page, next) { //执行下一页的回调 （到达临界点（默认滚动触发），触发下一页）
                //模拟数据插入
                setTimeout(function () {
                    var lis = [];
                    for (var i = 0; i < 3; i++) {
                        lis.push('<li>滚动加载:' + ((page - 1) * 3 + i + 1) + '</li>')
                    }
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 5); //假设总页数为 5
                }, 500);
            }
        });
        flow.load({
            elem: '#LAY_demo2' //流加载容器
            , scrollElem: '#LAY_demo2' //滚动条所在元素选择器
            , isAuto: false//是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。
            , isLazyimg: true//是否开启图片懒加载。默认false。如果设为true，则只会对在可视区域的图片进行按需加载。但与此同时，在拼接列表字符的时候，你不能给列表中的img元素赋值src，必须要用lay-src取代，
            ,end:'亲，没有更多数据了哦'
            , done: function (page, next) { //加载下一页
                //模拟插入
                setTimeout(function () {
                    var lis = [];
                    for (var i = 0; i < 3; i++) {
                        lis.push('<li>手动点击加载:' + ((page - 1) * 3 + i + 1) + '</li>')
                    }
                    next(lis.join(''), page < 5); //假设总页数为 5
                }, 500);
            }
        });

        //图片懒加载 按屏加载图片
        //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
        flow.lazyimg({
            elem: '#LAY_demo3 img'
            , scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
        });
    });
</script>