原理:
获取一张图片的宽度(所有图片的宽度是一定的)。
计算出浏览器一行图片的列数(页面宽度/图片宽度)。
new 一个新的数组,用于存放叠加图片的高度。
for循环图片个数,小于列数时,直接往页面上添加,同时把该图片的高度push到数组中。
大于列数时,图片的高度往上叠加。
HTML部分:
<body> <div id="main"> <div class="box"> <div class="pic"> <img src="p_w_picpaths/0.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="p_w_picpaths/1.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="p_w_picpaths/2.jpg"/> </div> </div> /*一下多余图片与上一致*/ </div> </body>
CSS部分:
*{ margin:0; padding:0; } #main{position: relative;} .box{ padding:15px 0 0 15px; float:left; } .pic{ padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0px 0px 5px #ccc; } .pic img{ width:165px; height:auto; }
最核心的部分--JS:
window.onload =function() { waterfall('main', 'box'); } function waterfall(parent,box){ var oParent = document.getElementById(parent); var oBoxs=getByClass(oParent,box);//获取父元素下的所有的class为box的子元素 var oBoxW=oBoxs[0].offsetWidth; //列数 var clos=Math.floor(document.documentElement.clientWidth/oBoxW); //设置main的宽度 oParent.style.cssText='width:'+oBoxW*clos+'px;margin:0 auto'; var arrH=new Array(); for(var i=0;i<oBoxs.length;i++){ if(i<clos){ arrH.push(oBoxs[i].offsetHeight); }else{ //获取高度最小的图片 var minH=Math.min.apply(null,arrH); //获取高度最小的图片的index var index=getIndexMinH(arrH,minH); oBoxs[i].style.position='absolute'; oBoxs[i].style.top=arrH[index]; oBoxs[i].style.left=oBoxs[index].offsetLeft; arrH[index]=arrH[index]+oBoxs[i].offsetHeight; } } console.log(arrH); } function getByClass(parent,box){ var boxs=new Array();//用来存取box的元素 tags= parent.getElementsByTagName('*');//获取父元素下的所有元素 for(var i=0;i<tags.length;i++){ if(tags[i].className==box){ boxs.push(tags[i]); } } return boxs; } function getIndexMinH(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } }