瀑布流布局思路：
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>
转载于:https://www.cnblogs.com/YAN-HUA/p/9122715.html
