JavaScript原生方法写瀑布流

来源：互联网发布：java 汽车租赁管理系统编辑：程序博客网时间：2024/06/09 22:56

瀑布流可以用三种方法制作：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>

0 0