先看所謂的瀑布流布局
在不使用瀑布流布局的情況下，當頁面要顯示不同高度的圖片時，會如下面顯示
下面的元素總是和最靠近它的元素對齊。
為了使元素能夠在我們想要的位置上顯示，我們使用絕對定位。
說一下大體思路(也是看了別人的):
一切的不對齊都是從第一行的圖片排列開始的，也許不是很准確，那么換一個說法：
要想使圖片排列整齊，那么就得從第一行排列開始。
假設第一行x個元素排列中有一個最矮的(假設不假設都一樣，假設是為了便於理解)，
較高的元素比這個最矮的要多出一塊區域來，那么第二行就要有人去把這個多出來的區域填上
當有人填上后，我們發現第一行最矮元素再加上這個填空白元素，比其他元素都更高了，這時我們把他倆看成一個元素
這樣還是只有一行x個元素，然后就循環唄！每次找出最矮的來，讓下一行的元素填充
代碼如下(圖片和reset.css要自己准備)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="gb2312" /> 5 <title>瀑布流練習</title> 6 <link type="text/css" rel="stylesheet" href="./css/reset.css" /> 7 8 <style> 9 ul.wrap{ 10 width:1200px; 11 margin:0 auto; 12 position:relative; /* 相對定位 */ 13 } 14 ul.wrap li{ 15 width:400px; 16 float:left; 17 position:absolute; /* 絕對定位 */ 18 } 19 ul.wrap li img{ 20 /* 計算好長度 */ 21 width:364px; 22 border:2px solid #bdbdbd; 23 padding:10px; 24 margin:4px; 25 } 26 </style> 27 28 <script type="text/javascript"> 29 30 window.onload = function(){ 31 pubuliu("ulwrap",3,400); 32 }; 33 34 //實現ul下的li瀑布流 35 //cols 表示一行幾列，liWidth 表示一列的寬度 36 function pubuliu(ulId,cols,liWidth){ 37 var wrap = document.getElementById(ulId); 38 var lis = wrap.getElementsByTagName("li"); 39 40 var li_h = []; 41 for(var i=0; i<lis.length; i++){ 42 if(i < cols){ 43 li_h[i] = lis[i].scrollHeight; 44 //定位元素 45 lis[i].style.left = i * liWidth + "px"; 46 lis[i].style.top = "0px"; 47 }else{ 48 //獲取數組最小值 49 var min_liH = Math.min.apply( Math, li_h ); 50 var key = getKeyByValue(li_h,min_liH); 51 //重定義最小高度 52 li_h[key] = min_liH + lis[i].scrollHeight; 53 54 //定位元素 55 lis[i].style.left = key * liWidth + "px"; 56 lis[i].style.top = min_liH + "px"; 57 } 58 } 59 } 60 61 //根據數組中的值獲取索引 62 function getKeyByValue(arr,value){ 63 for(var i=0; i<arr.length; i++){ 64 if(arr[i] == value){ 65 return i; 66 } 67 } 68 } 69 </script> 70 </head> 71 72 <body> 73 <ul class="wrap clearfix" id="ulwrap"> 74 <li> 75 <img src="./images/1.jpg" /> 76 </li> 77 <li> 78 <img src="./images/2.jpg" /> 79 </li> 80 <li> 81 <img src="./images/3.jpg" /> 82 </li> 83 <li> 84 <img src="./images/4.jpg" /> 85 </li> 86 <li> 87 <img src="./images/5.jpg" /> 88 </li> 89 <li> 90 <img src="./images/6.jpg" /> 91 </li> 92 <li> 93 <img src="./images/7.jpg" /> 94 </li> 95 <li> 96 <img src="./images/8.jpg" /> 97 </li> 98 <li> 99 <img src="./images/9.jpg" /> 100 </li> 101 <li> 102 <img src="./images/10.jpg" /> 103 </li> 104 </ul> 105 </body> 106 </html>
瀑布流布局分為兩部分：css部分和js部分。
css部分負責確定 li 的寬度、一行顯示幾列和定位方式
js部分負責確定具體的定位坐標
解釋一下pubuliu(ulId, cols, liWidth)這個函數。它對 ulId 元素下的子li元素進行瀑布流布局，cols是一行顯示幾列，liWidth是一列的寬度。