js无限加载分页原理实现

一般来说，很多网页都是用瀑布流进行内容显示。当可见区域滚动到底部时，自动加载下一段页面。原理显而易见，观察滚动条底部和窗口底部的距离便可。

当滚动条底部距离窗口底部一定距离时，触发ajax请求下一页内容。

简单的公式：  底部距离 = 整个文档高度 - 网页可见区域高度 - 滚动条距顶端距离

代码如下：

 1 function buttomDistance(len) {
 2     var docHeight = Math.max(document.body.scrollHeight,
 3       document.body.offsetHeight);
 4     var viewHeight = window.innerHeight ||
 5       document.documentElement.clientHeight || 
 6       document.body.clientHeight || 0;
 7     var scrollHeight = window.pageYOffset ||
 8       document.documentElement.scrollTop || 
 9       document.body.scrollTop || 0;
10    
11     return docHeight - viewHeight - scrollHeight < len;
12   }

里面之所以一个变量一大堆|| 是因为浏览器兼容策略....然后随时监控页面的此项参数。不停的检查，直到触发加载方法...

代码如下：

function checkHeight(){
  if(!buttomDistance(20)){
        return loadDoc();   
    }
    //Ajax请求下一页....
    //to do something...
}

function loadDoc(){
       setTimeout(checkHeight, 150);//间隔150ms 应该够了...
}

loadDoc();

比较麻烦的就是 各种浏览器的各种高度的取得方式，参考链接http://www.cnblogs.com/yuteng/articles/1894578.html

 

转载于:https://www.cnblogs.com/lgyhector/p/3225125.html