滚动加载更多内容

滚动加载更多内容

// 判断是否需要加载更多的内容
function loadMoreData() {
    var viewH = $(window).height(); //可见高度
    var scrollTop = $(window).scrollTop(); //已滚动高度
    var contentH = $("html").get(0).scrollHeight; //内容实际高度
    console.log(contentH + "-" + viewH + "-" + scrollTop);
    // 当剩余未显示内容少于一定的高度时，执行加载
    if (contentH - viewH - scrollTop <= 300) {
        doLoadViewList();
    }
}
// 测试：加载内容
function doLoadViewList() {
    var data = '<div class="view-list"></div>'
    $('.view-list-box').append(data);
}

/**
 * 频率控制
 * @param  {Function} fn           [需要调用的函数]
 * @param  {[type]}   delay        [延迟时间，单位毫秒]
 * @param  {[type]}   mustRunDelay [最大延迟时间，单位毫秒]
 */
var throttle = function(fn, delay, mustRunDelay) {
    var timer = null;
    var t_start;
    return function() {
        var context = this,
            args = arguments,
            t_curr = +new Date();
        clearTimeout(timer);
        if (!t_start) {
            t_start = t_curr;
        }
        if (t_curr - t_start >= mustRunDelay) {
            fn.apply(context, args);
            t_start = t_curr;
        } else {
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay);
        }
    };
};
window.onscroll = throttle(loadMoreData, 50, 100);