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样式

 1 <style type="text/css">
 2             * {
 3                 margin: 0;
 4                 padding: 0;
 5             }
 6             body{
 7                 overflow-x:hidden ;
 8             }
 9             #main {
10                 position: relative;
11                 margin: 0 auto;
12             }
13             
14             #main .box {
15                 position: absolute;
16                 /*transition: all 1s;*/
17             }
18             
19             #main .box .pic {
20                 width: 165px;
21                 padding: 10px;
22                 border: 1px solid #ccc;
23                 border-radius: 5px;
24                 box-shadow: 0 0 5px #ccc;
25             }
26             
27             #main .box .pic img {
28                 width: 100%
29             }
30 </style>

HTML代码

 1 <div id="main">
 2 　　<div class="box">
 3     　　<div class="pic">
 4           <img src="img/1.jpg" />
 5         </div>
 6     </div>
 7     <div class="box">
 8         <div class="pic">
 9            <img src="img/2.jpg" />
10         </div>
11     </div>
12     <div class="box">
13         <div class="pic">
14            <img src="img/3.jpg" />
15          </div>
16     </div>
17     <div class="box">
18         <div class="pic">
19            <img src="img/4.jpg" />
20         </div>
21     </div>
22     <div class="box">
23        <div class="pic">
24           <img src="img/5.jpg" />
25        </div>
26     </div>
27     <div class="box">
28        <div class="pic">
29           <img src="img/6.jpg" />
30        </div>
31     </div>
32     <div class="box">
33        <div class="pic">
34           <img src="img/7.jpg" />
35        </div>
36     </div>
37     <div class="box">
38        <div class="pic">
39           <img src="img/8.jpg" />
40        </div>
41     </div>
42     <div class="box">
43        <div class="pic">
44           <img src="img/9.jpg" />
45        </div>
46     </div>
62 </div>

js代码

 1 <script type="text/javascript">
 2             window.onload = function() {
 3                 waterFall("main", "box");
 4                 window.onresize = function() {
 5                     waterFall("main", "box");
 6                 }
 7 
 8                 function waterFall(parent, box) {
 9                     var oParent = document.getElementById(parent);
10                     var oBoxs = getByClass(oParent, box);
11                     var oBoxW = oBoxs[0].offsetWidth + 15;
12                     var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
13                     if(cols<4){
14                         cols=4;
15                     }
16                     
17                     
18                     var hArr = [];
19                     for(var i = 0; i < oBoxs.length; i++) {
20                         if(i < cols) {
21                             oBoxs[i].style.top = 0;
22                             oBoxs[i].style.left = i * oBoxW + "px";
23                             hArr.push(oBoxs[i].offsetHeight);
24                         } else {
25                             var minH = Math.min.apply(null, hArr);
26                             var index = getIndexOf(hArr, minH);
27                             var top = minH + 15; //加15用于图片上下的间距
28                             oBoxs[i].style.top = top + "px";
29                             oBoxs[i].style.left = oBoxs[index].offsetLeft + "px";
30                             hArr[index] += oBoxs[i].offsetHeight + 15;
31                         }
32                     }
33                     //设置父级main的宽度、高度
34                     var maxH = Math.max.apply(null, hArr);
35                     oParent.style.cssText = 'height:' + maxH + 'px;width:' + (oBoxW * cols - 15) + 'px;margin:0 auto';
36                 }
37 
38                 function getByClass(oParent, clsName) {
39                     var boxArr = new Array();
40                     var oElements = oParent.getElementsByTagName('*');
41                     var oElementsLen = oElements.length;
42                     for(var i = 0; i < oElementsLen; i++) {
43                         if(oElements[i].className == clsName) {
44                             boxArr.push(oElements[i])
45                         }
46                     }
47                     return boxArr;
48                 }
49 
50                 function getIndexOf(arr, val) {
51                     for(var i in arr) {
52                         if(arr[i] == val) {
53                             return i;
54                         }
55                     }
56                 }
57             }
58         </script>