生而爲人 誰不付出 誰不努力
本篇文章主要講述了是使用第三方插件layui中是流加載模塊，該模塊包含信息流加載和圖片懶加載兩大核心支持，無論是對服務端、還是前端體驗，都有非常大的性能幫助。你可能已經在太多的地方看到她們的身影了，但不妨現在開始，體驗一下Layui更爲簡單和高效的Flow吧。
使用
flow模塊包含兩個核心方法，如下所示：
codelayui.code
layui.use('flow', function(){
var flow = layui.flow;
//信息流
flow.load(options);
//圖片懶加載
flow.lazyimg(options);
});
下面直接給出我實際寫的demo代碼和效果圖
1：實際的代碼和相對應的jQuery代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 注意：如果你直接複製所有代碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>信息流 - 滾動加載</legend>
</fieldset>
<p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p>
<p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p>
</p>
<br>
<br>
<ul class="flow-default" id="LAY_demo1"></ul>
<ul class="flow-default" id="LAY_demo2"></ul>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接複製所有代碼到本地，上述js路徑需要改成你本地的 -->
<script>
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //流加載容器
,end:'沒有更多數據展示啦' //沒有數據之後的提示語
,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
}, 500);
}
});
flow.load({
elem: '#LAY_demo2' //流加載容器
,scrollElem: '#LAY_demo2' //滾動條所在元素，一般不用填，此處只是演示需要。
,isAuto: false
,isLazyimg: true
,done: function(page, next){ //加載下一頁
//模擬插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><image src="http://images.xinjuenet.cn//20200215195621.jpg" style="height: 100px;"/></li>')
}
next(lis.join(''), page < 6); //假設總頁數爲 6
}, 500);
}
});
});
</script>
</body>
</html>
2實際 的效果頁面的效果是：首先加載頁面的時候 會自動加載第一頁的數據，
2.1頁面沒有被數據展示出現滾動條：如果展示的數據沒有讓頁面出現了滾動條，可以通過點擊加載更多來請求下一頁的數據。
2.2：頁面被數據展示之後出現滾動條：可以通過滾動到底部來加載下一頁數據。
主要的是用使用到layui中的flow模塊
3上述是一個比較簡單的例子，以下是信息流完整的參數支撐（即options對象），它們將有助於你更靈活地應對各種場景
| 參數 | 類型 | 描述 |
|---|---|---|
| elem | string | 指定列表容器的選擇器 |
| scrollElem | string | 滾動條所在元素選擇器，默認document。如果你不是通過窗口滾動來觸發流加載，而是頁面中的某一個容器的滾動條，那麼通過該參數指定即可。 |
| isAuto | boolean | 是否自動加載。默認true。如果設爲false，點會在列表底部生成一個“加載更多”的button，則只能點擊它纔會加載下一頁數據。 |
| end | string | 用於顯示末頁內容，可傳入任意HTML字符。默認爲：沒有更多了 |
| isLazyimg | boolean | 是否開啓圖片懶加載。默認false。如果設爲true，則只會對在可視區域的圖片進行按需加載。但與此同時，在拼接列表字符的時候，你不能給列表中的img元素賦值src，必須要用lay-src取代，如：
JavaScript片段layui.code
|
| mb | number | 與底部的臨界距離，默認50。即當滾動條與底部產生該距離時，觸發加載。注意：只有在isAuto爲true時有效。 額，等等。。mb=margin-bottom，可不是罵人的呀。 |
| done | function | 到達臨界點觸發加載的回調。信息流最重要的一個存在。攜帶兩個參數：
JavaScript片段layui.code
|
圖片懶加載
應該說比當前市面上任何一個懶加載的實現都更爲強勁和輕量，她用不足80行代碼巧妙地提供了一個始終加載當前屏圖片的高性能方案（無論上滑還是下滑）。對你的網站因爲圖片可能帶來的壓力，可做出很好的應對。
codelayui.code
layui.use('flow', function(){
var flow = layui.flow;
//當你執行這樣一個方法時，即對頁面中的全部帶有lay-src的img元素開啓了懶加載（當然你也可以指定相關img）
flow.lazyimg();
});
如上所述，它只會針對以下img元素有效：
HTMLlayui.code
<img lay-src="aaa.jpg">
<img src="bbb.jpg" alt="該圖不會懶加載">
<img lay-src="ccc.jpg">
圖片懶加載的使用極其簡單，其參數（options對象）可支持的key如下表所示：
| 參數 | 類型 | 描述 |
|---|---|---|
| elem | string | 指定開啓懶加載的img元素選擇器，如 elem: '.demo img' 或 elem: 'img.load' |
| scrollElem | string | 滾動條所在元素選擇器，默認document。如果你不是通過窗口滾動來觸發流加載，而是頁面中的某一個容器的滾動條，那麼通過該參數指定即可。 |
最後的是官方的一些說明文檔和使用方法。 實際的：demo下載地址 我已上傳下載直接運行查看實際的效果哦