瀑布流判断加载分页条件

很流行的瀑布流式布局，如何判断内容是否需要加载接口，什么时候开始加载合适，加载到什么地方停止？来看看这个简单的思路。

一般我们是这样子的。

1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。

2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。

3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。

var intf_url="http://caibaojian.com/intf";
var pathUrl = "http://caibaojian.com/";
var page=1;
var isLoadRB=false;  
var ul_select=$("#fansList");
var btn_more=$("#loading");
if(ul_select.length <1) return ;
var is_more =true;
//跨域请求接口
function loadjs(src,callback){
    var js= document.createElement('script');
    js.src = src;
    js.onreadystatechange = js.onload =function(){
        if(!js.readyState || js.readyState=='loaded'
            || js.readyState=='complete'){
            if(callback){callback()||callback};
    }
};
js.charset="utf-8";
document.getElementsByTagName('head')[0].appendChild(js);
}
//回调函数
function fill(data){
if(data.pageCount==data.pageNo){
    is_more=false;//如果数据全部加载完毕，取消加载
        $("#loading").html("加载完毕");
}
}
//解析接口
function queryIntf(){
var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";
loadJs(url,callback);
}
function callback(){
page++;
}
/*判断是否要加载接口*/
function needtoloadRB(){
    var btn_top=btn_more.offset().top;
    var window_height=$(window).height();
    var scroll_Top=$(window).scrollTop();
    return btn_top<scroll_Top+window_height?true:false;
}
$(window).scroll(function(){
    var _needload=needtoloadRB();
    if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}
})
window.onload = function(){
    queryintf(); 
}

以上就是比较简单的随着下拉内容不断加载的思路代码。

json格式类似于（如果是动态接口，可以通过callback函数，则这里不用加fill()）：

fill({"fans":[{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"caibaojian.com","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});

原来静态也可以做接口回调。通过静态处理，则大大缓解了服务器压力和加速生成内容，是大流量网站必备的处理方式。