原理：
獲取一張圖片的寬度(所有圖片的寬度是一定的)。
計算出瀏覽器一行圖片的列數(頁面寬度/圖片寬度)。
new 一個新的數組，用於存放疊加圖片的高度。
for循環圖片個數，小於列數時，直接往頁面上添加，同時把該圖片的高度push到數組中。
大於列數時，圖片的高度往上疊加。
HTML部分：
<body> <div id="main"> <div class="box"> <div class="pic"> <img src="images/0.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="images/1.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="images/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;
}
}
}