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: 0;
                padding: 0;
            }
            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>