原生js实现瀑布流

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="gbk">  
    <title>原生js实现瀑布流</title>  
    <style type="text/css">  
    body{  
        overflow: scroll;  
        height: 1000px;  
    }  
        *{  
            margin: 0;  
            padding: 0;  
        }  
        #main{  
            position: relative;  
        }  
        .box{  
            padding: 15px 0 0 15px;  
            float: left;  
        }  
        .pic{  
            padding: 10px;  
            border:1px solid #CCC;  
            border-radius: 5px;  
            box-shadow: 0 0 5px #ccc;  
        }  
        .pic img{  
            width: 165px;  
            height: auto;  
        }  
    </style>  
</head>  
<body>  
    <div id="main">  
        <div class="box">  
            <div class="pic">  
                <img src="images/1.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/2.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/3.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/4.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/5.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/6.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/7.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/8.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/9.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/10.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/9.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/8.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/7.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/6.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/5.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/4.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/3.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/2.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/1.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/5.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/6.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/7.jpg">  
            </div>  
        </div>  
                <div class="box">  
            <div class="pic">  
                <img src="images/8.jpg">  
            </div>  
        </div>  
    </div>  
  
  
    <script type="text/javascript">  
    window.οnlοad=function(){  
        waterfall('main','box');  
        var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'}]}  
        //滚动添加  
        window.οnscrοll=function(){  
            if(checkScrollSlide()){  
                var oParent=document.getElementById('main')  
                //将数据库渲染到当前页面的尾部  
                for(var i=0;i<dataInt.data.length;i++){  
                    var oBox=document.createElement('div');  
                    oBox.className='box';  
                    oParent.appendChild(oBox);  
                    var oPic=document.createElement('div');  
                    oPic.className='pic';  
                    oBox.appendChild(oPic);  
                    var oImg=document.createElement('img');  
                    oImg.src="images/"+dataInt.data[i].src;  
                    oPic.appendChild(oImg);  
                }  
                waterfall('main','box');  
            }  
        }  
    }  
    function waterfall(parent,box){  
        //将main下的所有class为box的元素取出来  
        var oParent=document.getElementById(parent);  
        var oBoxs=getByClass(oParent,box);  
        //计算整个页面的显示雷氏(页面/box的宽)  
        var oBoxW=oBoxs[0].offsetWidth;  
        var cols=Math.floor(document.documentElement.clientWidth/oBoxW);  
        //console.log(cols);  
        //设置main的宽  
        oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';         
        var hArr=[];//存放每一列高度  
        for(var i=0;i<oBoxs.length;i++){  
            if(i<cols){  
                hArr.push(oBoxs[i].offsetHeight);  
            }  
            else{  
                var minH=Math.min.apply(null,hArr);  
                var index=getMinhIndex(hArr,minH);  
                oBoxs[i].style.position="absolute";  
                oBoxs[i].style.top=minH+'px';  
                oBoxs[i].style.left=oBoxW*index+'px';  
                hArr[index]+=oBoxs[i].offsetHeight;  
            }  
        }  
    }  
  
    //根据Class获取元素  
    function getByClass(parent,clsName){  
        var boxArr=new Array(),//用来存储获取到的所有class为Box的元素  
            oElements=parent.getElementsByTagName('*');  
        for(var i=0;i<oElements.length;i++){  
            if (oElements[i].className==clsName) {  
                boxArr.push(oElements[i]);  
            }  
        }  
        return boxArr;  
    }  
    function getMinhIndex(arr,val){  
        for(var i in arr){  
            if(arr[i]==val){  
                return i;  
            }  
        }  
  
    }  
  
    //检测是否具备了滚动条件  
    function checkScrollSlide(){  
        var oParent=document.getElementById('main');  
        var oBoxs=getByClass(oParent,'box');  
        var lastBoxH=oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);  
        var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;  
        var height=document.body.clientHeight || document.documentElement.clientHeight;  
        return (lastBoxH<scrollTop+height)?true:false;  
    }  
    </script>  
</body>  
</html>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值