瀑布流的原理

Posted 2020-06-19 hrbust_09zhangyabin

以前写过瀑布流，但对于其中某些概念和一些细节一直没理清，导致写代码时一直心存疑虑。没法用准确的代码来描述。

仅仅停留在我的代码能运行，但出了问题不好查。

昨天花近2小时理清了。

var wuyu=1;
.
.
.
function roll(){
    //scrollTop “卷”起来的高度值
    var sTop = document.body.scrollTop || document.documentElement.scrollTop;    //获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    var cHeight = document.documentElement.clientHeight;    //可见区域高度
    var dHeight = $(document).height();    //是获取整个页面的高度
    if (sTop >= (dHeight - cHeight)  && wuyu==1 ) {
        pindex++;
        getMessage(pindex);
        wuyu=0;
    }
    
}
window.onscroll=roll;

滚动条件：　　“卷”起来的高度值 >  整个页面的高度-   可见区域高度

 

看看代码就明白了。