很早以前我就想自己學寫一下瀑布流佈局，可是由於懶神來找我聊天咯，所以推遲咯很久直到今天我纔來寫瀑布流佈局。由於鄙人的js還有很大的提升空間，所以我是先看咯一下那些大神的具體講解和分析，然後纔開始着手寫的，收穫那是槓槓的。
1、大家都知道要想實現瀑布流，就必須規定每一個區塊的寬度要一致
2、確定每一排要放置多少列（容器的寬度/區塊的寬度 然後用Math.floor向下取整數）
3、容器第一排放置的所有區塊具體頂部都是一樣的距離（距離左面的距離就是他的索引*區塊的offsetWidth）
4、然後尋找高度最低的區塊位置，然後下面接着開始放置區塊
5、除了第一排的距離頂部是相同的，第二排開始區塊的絕對定位，top值爲它上i個區塊的高度+margin值，
具體的效果圖如下：
具體代碼如下所示（裏面包括咯具體的註釋說明）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>瀑布流佈局</title>
</head>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
li{ list-style: none; width: auto;}
.wrap{ width: 1140px; height: 2000px;margin:0 auto; position: relative;}
.wrap li{ float: left; position: absolute; top:0; left:0; text-align: center;}
.wrap li img{ display: block;}
h2{ color: #ff0000; text-align: center; line-height: 50px;}
</style>
<body>
<h2>下面是我寫的一個瀑布流佈局的頁面</h2>
<div class="wrap" id="wrap">
<ul>
<li>
<img src="imgs/1.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/2.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/3.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/4.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/5.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/6.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/7.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/8.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/9.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/6.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/7.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/8.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/9.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/10.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/1.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/2.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/3.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/4.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/9.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/6.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/7.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/8.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/9.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/10.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/6.jpg" alt="" />
<p>圖標標題</p>
</li>
<li>
<img src="imgs/8.jpg" alt="" />
<p>圖標標題</p>
</li>
</ul>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var margin = 10,//設置區塊的margin值
li = $("li"),//獲取區塊數組
li_W = li[0].offsetWidth + margin;//獲取並設置區塊的寬度（如果區塊設置咯邊框，那麼這個裏面就包含咯邊框）
console.log(li_W);
function waterfall(){
var h=[],//定義一個數組,用來裝所以的li的高度值的一個數組
wrap = document.getElementById("wrap"),//獲取容器id
wrap_W = wrap.offsetWidth,//獲取容器的寬度
n = Math.floor(wrap_W/li_W);//設置容器一行能發幾個區塊
for( var i = 0; i<li.length;i++){
li_H = li[i].offsetHeight;//取得每個li的高度
if(i < n){//這裏的n代表的是一行能放幾個區塊，如果小於n，就說明是位置在第一排
h[i] = li_H;//把每個區塊的高度放在一個數組裏面（記住這裏的這句一定要寫在小於 n 的if裏面 ，想看別的效果你可以試一下放在外面是什麼樣式的）
li.eq(i).css({
"top":0,
"left":i*li_W
});
}else{
min_H =Math.min.apply(null,h);//取得數組中的最小值，區塊中高度值最小的那個
minkey = getMinnumer(min_H,h); //最小的值對應的指針
h[minkey]+= li_H+margin ;//加上新高度後更新高度值
li.eq(i).css({
"top":min_H+margin,
"left":minkey * li_W
});
}
}
}
//取集合中最小的一個數
function getMinnumer(min,box){//min代表的是最小的那個數，box代表一個集合
for(num in box){
if(box[num] == min){
return num;
}
}
}
/*這裏一定要用onload，因爲圖片不加載完就不知道高度值*/
window.onload = function() {
waterfall();
};
/*瀏覽器窗口改變時也運行函數*/
window.onresize = function() {
waterfall();
};
</script>
</html>
如果裏面還可以修改的更完美的話，請大神賜教，謝謝！
