js网页瀑布流布局

瀑布流布局思路：

1、css样式，图片的父级div样式设置为定位或者浮动

2、找出图片父级元素（box）和最外元素（main）；获取box的宽度和main的宽，然后计算main容器一行能容纳多少个box（即有多少列）

3、声明一个空数组（用于放置每列的高度）

4、for(var i=0;i<box.length;i++)循环遍历所有的box元素，if 判断i是否小于上面求得的列数，设置box元素top、left和把box元素的高度添加进空数组；如果i值大于列数就是第二行其余的box元素，查找出数组中的最小值和最小值的索引，设置box的top为这个值，left值为box[index].offsetLeft，更新所查找到的数组元素的值（原数组值+当前box的高度）

5、定位和浮动脱离了文档流，最高给main设置高度为数组的最大值

css样式

 <style type="text/css">
             * {
                 margin:;
                 padding:;
             }
             body{
                 overflow-x:hidden ;
             }
             #main {
                 position: relative;
                 margin: 0 auto;
             }

             #main .box {
                 position: absolute;
                 /*transition: all 1s;*/
             }

             #main .box .pic {
                 width: 165px;
                 padding: 10px;
                 border: 1px solid #ccc;
                 border-radius: 5px;
                 box-shadow: 0 0 5px #ccc;
             }

             #main .box .pic img {
                 width: 100%
             }
 </style>

HTML代码

 <div id="main">
 　　<div class="box">
     　　<div class="pic">
           <img src="img/1.jpg" />
         </div>
     </div>
     <div class="box">
         <div class="pic">
            <img src="img/2.jpg" />
         </div>
     </div>
     <div class="box">
         <div class="pic">
            <img src="img/3.jpg" />
          </div>
     </div>
     <div class="box">
         <div class="pic">
            <img src="img/4.jpg" />
         </div>
     </div>
     <div class="box">
        <div class="pic">
           <img src="img/5.jpg" />
        </div>
     </div>
     <div class="box">
        <div class="pic">
           <img src="img/6.jpg" />
        </div>
     </div>
     <div class="box">
        <div class="pic">
           <img src="img/7.jpg" />
        </div>
     </div>
     <div class="box">
        <div class="pic">
           <img src="img/8.jpg" />
        </div>
     </div>
     <div class="box">
        <div class="pic">
           <img src="img/9.jpg" />
        </div>
     </div>
 </div>

js代码

 <script type="text/javascript">
             window.onload = function() {
                 waterFall("main", "box");
                 window.onresize = function() {
                     waterFall("main", "box");
                 }

                 function waterFall(parent, box) {
                     var oParent = document.getElementById(parent);
                     var oBoxs = getByClass(oParent, box);
                     var oBoxW = oBoxs[0].offsetWidth + 15;
                     var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
                     if(cols<4){
                         cols=4;
                     }

                     var hArr = [];
                     for(var i = 0; i < oBoxs.length; i++) {
                         if(i < cols) {
                             oBoxs[i].style.top = 0;
                             oBoxs[i].style.left = i * oBoxW + "px";
                             hArr.push(oBoxs[i].offsetHeight);
                         } else {
                             var minH = Math.min.apply(null, hArr);
                             var index = getIndexOf(hArr, minH);
                             var top = minH + 15; //加15用于图片上下的间距
                             oBoxs[i].style.top = top + "px";
                             oBoxs[i].style.left = oBoxs[index].offsetLeft + "px";
                             hArr[index] += oBoxs[i].offsetHeight + 15;
                         }
                     }
                     //设置父级main的宽度、高度
                     var maxH = Math.max.apply(null, hArr);
                     oParent.style.cssText = 'height:' + maxH + 'px;width:' + (oBoxW * cols - 15) + 'px;margin:0 auto';
                 }

                 function getByClass(oParent, clsName) {
                     var boxArr = new Array();
                     var oElements = oParent.getElementsByTagName('*');
                     var oElementsLen = oElements.length;
                     for(var i = 0; i < oElementsLen; i++) {
                         if(oElements[i].className == clsName) {
                             boxArr.push(oElements[i])
                         }
                     }
                     return boxArr;
                 }

                 function getIndexOf(arr, val) {
                     for(var i in arr) {
                         if(arr[i] == val) {
                             return i;
                         }
                     }
                 }
             }
         </script>