JS瀑布流下拉加载数据效果

最新推荐文章于 2022-04-08 22:46:38 发布

顛沛流離的小時光

最新推荐文章于 2022-04-08 22:46:38 发布

阅读量832

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转载自：http://www.qdfuns.com/notes/20156/42447f7f98a780401dd8952aff505bcd.html

写了一个瀑布流下拉加载数据的效果。由于没有数据就没有用到ajax，用setTimeout()函数代替了一下，原理差不多的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流形式one</title>
    <style type="text/css">
        html,body {
            background: #ccc;
            padding:0px;
            margin:0px;
        }
        .box {
            width:960px;
            margin:0 auto;
            overflow: auto;
        }
        .childDom {
            background: #fff;
            transition: all .5s ease;
        }
        .childDom:hover {
            transform: scale(1.1);
        }
        .loadInfo {
            text-align: center;
            font-size:2em;
        }
    </style>
    <script type="text/javascript">
        var Funs=function(newObj){
            var Obj={
                width:240,
                height:400,
                rowsNum:4,
                dataNum:22,
                boxDom:"box",
                num:10,
                class:"childDom"
            };
            var topNum=0,leftNum=0;
            Funs.prototype.setEle=function(){
                var boxDom=document.getElementById(Obj.boxDom);
                var boxWidth=Obj.width*Obj.rowsNum+Obj.num*(Obj.rowsNum-1);
                if(Obj.dataNum/Obj.rowsNum !== parseInt(Obj.dataNum/Obj.rowsNum)){
                    var boxHeight=Obj.height*(parseInt((Obj.dataNum/Obj.rowsNum))+1)+Obj.num*(Obj.dataNum/Obj.rowsNum);
                }else{
                    var boxHeight=Obj.height*(Obj.dataNum/Obj.rowsNum)+Obj.num*((Obj.dataNum/Obj.rowsNum)-1);
                }
                boxDom.style.width=boxWidth+"px";
                boxDom.style.height=boxHeight+"px";
                return boxDom;
            };
            Funs.prototype.creChildEle=function(n){
                var creEle=document.createElement("div");
                creEle.className=Obj.class;
                creEle.innerHTML=n;
                creEle.style.float="left";
                creEle.style.position="absolute";
                creEle.style.width=Obj.width+"px";
                creEle.style.height=Obj.height+"px";
                creEle.style.marginLeft=leftNum+"px";
                creEle.style.marginTop=topNum+"px";
                return creEle;
            };
            Funs.prototype.compute=function(n){
                if((n+1)/Obj.rowsNum == parseInt((n+1)/Obj.rowsNum)){
                    leftNum=0;
                    topNum+=Obj.height+Obj.num;
                }else{
                    leftNum+=Obj.width+Obj.num;
                    topNum=topNum;
                }
            };
            Funs.prototype.init=function(){
                if(newObj !== null){
                    Obj=newObj;
                }
                var dom=this.setEle();
                for(var i=0;i<Obj.dataNum;i++){
                    var creEle=this.creChildEle(i);
                    this.compute(i);
                    dom.appendChild(creEle);
                }
            }
        };
        //获取滚动高度、文档高度、浏览器视口高度
        var heightFuns=function(){
            //获取滚动高度
            heightFuns.prototype.getScrollTop=function (){
                var scrollTop=0,bodyScrollTop=0,documentScrollTop=0;
                if(document.body){
                    bodyScrollTop=document.body.scrollTop;
                }
                if(document.documentElement){
                    documentScrollTop=document.documentElement.scrollTop;
                }
                scrollTop = (bodyScrollTop-documentScrollTop>0)?bodyScrollTop:documentScrollTop;
                return scrollTop;
            };
            //获取文档的总高度
            heightFuns.prototype.getScrollHeight=function (){
                var scrollHeight=0,bodyScrollHeight=0,documentScrollHeight;
                if(document.body){
                    bodyScrollHeight=document.body.scrollHeight;
                }
                if(document.documentElement){
                    documentScrollHeight=document.documentElement.scrollHeight;
                }
                scrollHeight=(bodyScrollHeight-documentScrollHeight>0)?bodyScrollHeight:documentScrollHeight;
                return scrollHeight;
            };
            //获取浏览器视口的高度
            heightFuns.prototype.getWindowHeight=function (){
                var windowHeight=0;
                if(document.compatMode == 'CSS1Compat'){
                    windowHeight=document.documentElement.clientHeight;
                }else{
                    windowHeight=document.body.clientHeight;
                }
                return windowHeight;
            }
        }
    </script>
</head>

<body>
<h1 style="text-align: center;">模拟瀑布流下拉加载数据效果</h1>
<div class="box" id="box">
</div>
<div class="loadInfo" id="loadInfo"></div>
    <script type="text/javascript">
        var data={
            width:250,
            height:300,
            rowsNum:3,
            dataNum:0,
            boxDom:"box",
            num:20,
            class:"childDom"
        };
        function showData(){
            data.dataNum+=10;
            var creObj=new Funs(data);
            creObj.init();
        }
        showData();
        var heightObj=new heightFuns();
        window.onscroll=function(){
            var loadDom=document.getElementById("loadInfo");
            if(heightObj.getScrollTop()==heightObj.getScrollHeight()-heightObj.getWindowHeight()){
                setTimeout(showData,1000);
                loadDom.innerHTML="正在加载...";
            }
        }
    </script>
</body>
</html>