上拉加载

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)
        }
    }
});