HTML
<div id="imglist"></div>
JavaScript
var dataList = [[{"title":"111","img":"images/01.jpg"}],[{"title":"222","img":"images/02.jpg"},{"title":"333","img":"images/03.jpg"}]] // 一段两层循环的json
function appendItem(item){
var itemHtml = ''
for (var j = 0; j < item.length; j++) {
itemHtml += '<div class="item" onclick=showTK("'+ item[j].img +'")>'
itemHtml += '<img src="'+ item[j].img +'">'
itemHtml += '</div>'
}
return itemHtml
}
function appendNewData(list) {
var html = ''
for (var i = 0; i < list.length; i++) {
html += '<div class="flex-box">'
html += appendItem(list[i])
html += '</div>'
}
$('#imglist').append($(html))
}
appendNewData(dataList.slice(0,9)) //加载完先执行1-10条数据
var page = 0 //当前页码
var pageSum = Math.ceil(dataList.length/10); //总页码
//滚动监听
$(window).scroll(function() {
var scrollH = document.documentElement.scrollHeight; //网页高度
var clientH = document.documentElement.clientHeight; //显示区域高度
clientH = clientH + clientH //两倍窗口
//当滚动条滑到底部的前2屏幕高度,加载新数据
if (scrollH - (document.documentElement.scrollTop | document.body.scrollTop) < clientH){
//页码小于总页码
if(page <= pageSum){
page ++ //页码+1
thisList= dataList.slice(page*10,page*10+9)
appendNewData(thisList)
}
}
});