layui(九)——flow組件常見用法總結

　　該模塊包含 信息流加載 和  圖片懶加載  兩大核心支持，無論是對服務端、還是前端體驗，都有非常大的性能幫助。下邊分別給出了這兩種技術的使用方法

一、信息流加載

　　信息流加載的核心方法時  flow.load(options) ，下邊給了一個模擬加載新聞列表的栗子

前端html和js

    <style>
        ul li {
            height: 200px;
            border: 5px solid green;
            font-size: 50px;
            line-height: 200px;
            text-align: center;
        }
    </style>
    <ul id="newsList"></ul>
    <!-- 條目中可以是任意內容，如：<img src=""> -->
    <script src="~/Content/layui/layui.js"></script>
    <script>
        layui.use('flow', function () {
            var $ = layui.jquery; //不用額外加載jQuery，flow模塊本身是有依賴jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#newsList'    //指定列表容器
                , isAuto: false      //到底頁面底端自動加載下一頁，設為false則點擊'加載更多'才會加載
                //, mb: 100          //距離底端多少像素觸發auto加載
                , isLazying: true    //當單個li很長時，內部有很多圖片，對圖片進行懶加載，默認false。
                , end: '<p style="color:red">木有了</p>'    //加載所有后顯示文本，默認'沒有更多了'
                , done: function (page, next) {            //到達臨界，觸發下一頁
                    var lis = [];
                    $.get('/Home/GetList?page=' + page, function (res) {
                        //假設你的列表返回在data集合中
                        layui.each(res.data, function (index, item) {
                            lis.push('<li>' + item + '</li>');
                        });
                        next(lis.join(''), page < res.pages);//pages是后台返回的總頁數
                    });
                }
            });
        });
    </script>

后台服務器代碼

    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetList(int page)
        {
           //簡單數據庫中新聞
            List<string> newsList = new List<string>();
            for (int i = 0; i < 55; i++)
            {
                newsList.Add("新聞" + i);
            }
           //總頁數
            int pages =(int) Math.Ceiling((double)55 / 10);
　　　　　　　//模擬分頁
            var data= newsList.Skip<string>((page - 1) * 10).Take(10);
            return Json(new { data,pages},JsonRequestBehavior.AllowGet);
        }
    }

二、圖片懶加載

　　layui中的圖片懶加載十分簡單，將圖片的src屬性替換為lay-src，然后調用  flow.lazyimg() 方法即可

layui.use('flow', function(){
  var flow = layui.flow;
  //當你執行這樣一個方法時，即對頁面中的全部帶有lay-src的img元素開啟了懶加載
    flow.lazyimg();    //方式一，全部懶加載
    flow.lazyimg({     //方式二，特定容器懶加載
    elem:'#box1'      //不設置elem，對頁面中所有圖片進行懶加載
    ，scrollElem:document
    }) 
});

注:這是為了個人查找方便整理的文檔，並沒有總結完全，查看更多可訪問官網http://www.layui.com/doc