使用layui.flow流加载和模板引擎layui.laytpl实现下拉加载更多和图片懒加载

 使用layui.flow流加载和模板引擎layui.laytpl实现下拉加载更多和图片懒加载

layui版本：v2.6.8

html

<div id="box_left">
	<div class="NewsList" id="NewsListView"> </div>
	 
	<script id="NewsListTpl" type="text/html">
		{{# layui.each(d, function(index, item){ }} 
			<div class="NewsList_item">
				<div class="NewsList_item_tuwen">
					<a href="?id={{item.id}}" target="_blank">
					<!--temp.png是临时占位图-->
					<img alt="{{item.title}}" src="/img/temp.png" lay-src="{{item.imgUrl)}}">
					</a> 
					<p class="desc">{{item.title}}</p> 
				</div>
			</div> 
		{{# }); }}
	</script>
</div>

引入

引入  'flow','jquery'
var flow = layui.flow; //流加载
var $ = layui.jquery;

js

var logLock = true; //是否向控制台打印调试数据
var log = function(msg) { if (logLock == true) console.log(msg) };

var pageNum = 1; //页码
var pageSize = 10; //几条数据
var pageSum = 1;

/**
 * 获取总页数
 * @param {*} _allNumber 所有条数据
 * @param {*} _pageSize 每页条数
 */
var GetPageSumFUN = function(_allNumber, _pageSize) {
	var i = _allNumber / _pageSize;
	var j = _allNumber % _pageSize;
	log("i==" + i);
	log("j==" + j);
	i = j > 0 ? i + 1 : i;
	log("i==" + i);
	return i;
};


var DataArray = new Array();
var _item_dataArry; //防止IdArray污染的缓存变量
var GetInterestListDataFun = function(IdArray) { 

_item_dataArry = IdArray;

        flow.load({
            elem: '#box_left', //指定列表容器  
            mb: 50, //与底部的临界距离，默认50 触发加载更多
            isLazyimg: true, //	是否开启图片懒加载
            done: function(page, next) { //到达临界点（默认滚动触发），触发下一页

                IdArray = _item_dataArry;

                var formData = {
                    typeid: IdArray,
                    pageNum: page,
                    pageSize: pageSize
                };

                $.ajax({
                    url:'https://mp.csdn.net/mp_blog/',
                    type: 'get',
                    data: formData,
                    success: function(data) {
                        if (data.code == "10000") {
                            var _A1 = DataArray;
                            DataArray = _A1.concat(data.data);//合并数组
                              
                            $("#NewsListView").html('');
                            var view = document.getElementById('NewsListView');
                            var getTpl = NewsListTpl.innerHTML;
                            laytpl(getTpl).render(DataArray, function(html) {
                                view.innerHTML = html;
                            });
							 //data.total 总数据条数据
							 //pageSize 每页显示的数据条数
                            next('', page < GetPageSumFUN(data.total, pageSize));

                        } else {
                            layer.alert(data.msg);
                        }
                        // log("信息===")
                        // log(JSON.stringify(data))
                    }
                });
				
            }
        });

    };
    GetInterestListDataFun();