JavaScript原生方法写瀑布流

瀑布流可以用三种方法制作：
1：JavaScript原生方法
2：jQurey方法
3：CSS3多栏布局

我们这次讲的就是JavaScript原生方法制作瀑布流：

一、HTML语句

<div id="main">
    <div class="box">
        <!--.box盒子用来定义外边距-->
        <div class="pic">
            <img src="" alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="" alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="" alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="" alt=""/>
        </div>
    </div>
</div>

二、CSS设置

*{
            margin:0;
            padding: 0;;
        }
        #main{
            position: relative;
        }
        /*盒子与盒子之间的距离最好用padding实现，因为magin不方便计算每个数据块的高度和他们之间的距离*/
        .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;
        }

三、JS语句

<script>
        window.onload = function(){
            waterfall('main','box');
            var dataInt = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'},{"src":'6.jpg'}]}
            window.onscroll=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 = documen.getElementById(parent);
            var oBoxs = getByClass(oParent,box);
//            计算整个页面显示的列数（页面宽/box宽）
            var oBoxW=oBoxs[0].offsetWidth;
            var cols=Math.floor(documen.documentElement.clientWidth/oBoxW);
//            设置main的宽度
            oParent.style.cssText = 'width:'+oBoxW*cols + 'px;magin:o auto';
//            存放每一列高度的数组
            var hArr=[];
            for(var i=0;i<oBoxs.length;i++){
                if(i<cols){
                    hArr.push(oBoxs.offsetHeight);
                }else{
                    var minH = Math.main.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';
//                    oBoxs[i].style.left = oBoxs[index].offsetLeft+'px';
                    hArr[index]+=oBoxs[i].offsetHeight

                }
            }
        }
        function getByclass(parent,clasName){
//          用来存储获取到的所有的class为box的元素
            var boxArr=new Array(),
                    oElements=parent.getElementsByTagName('*');
            for(var i=0;i<oElements.length;i++){
                if(oElements[i].className==clasName){
                    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+Main.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>