（每次代碼傳到csdn博客裏都會顯得特別亂，以後傳圖片算了.........）
瀑布流就是將用戶上傳的圖片一列一列顯示在頁面上，
但是每張圖片可能高度不一樣，如果不按一定規律添加圖片，
會造成有的一列圖片特別長，有的一片特別短，
因此我們每次往列表裏添加圖片時，都會往最矮的那個列表添加圖片；
入下圖：
3是最矮的那個列表，因此我們往它下面加圖，後面的每一次加圖都是這樣
往最矮的一個列表里加圖；接下來用代碼解釋它吧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#box {*/ /*width: 1152px;*/ /*margin: 0 auto;*/ /*}*/ img { vertical-align: middle; } ul, li { list-style: none; } #box ul { /*padding: 5px;*/ /*border: 1px solid #ccc;*/ float: left; list-style: none; } </style> </head> <body> <div id="box"> </div> </body> </html> <script>
這裏不用ajax在服務器獲取數據了，我們就自己建個假的數據吧；
datas裏面代表每次服務器給我們發送的數據 var datas = [ {"src": "images/P_000.jpg", "height": 288}, {"src": "images/P_001.jpg", "height": 288}, {"src": "images/P_002.jpg", "height": 288}, {"src": "images/P_003.jpg", "height": 129}, {"src": "images/P_004.jpg", "height": 284}, {"src": "images/P_005.jpg", "height": 253}, {"src": "images/P_006.jpg", "height": 245}, {"src": "images/P_007.jpg", "height": 343}, {"src": "images/P_008.jpg", "height": 238}, {"src": "images/P_009.jpg", "height": 159}, {"src": "images/P_010.jpg", "height": 289}, {"src": "images/P_011.jpg", "height": 127}, {"src": "images/P_012.jpg", "height": 282}, {"src": "images/P_013.jpg", "height": 144}, {"src": "images/P_014.jpg", "height": 269}, {"src": "images/P_015.jpg", "height": 282}, {"src": "images/P_016.jpg", "height": 142}, {"src": "images/P_017.jpg", "height": 279}, {"src": "images/P_018.jpg", "height": 289}, {"src": "images/P_019.jpg", "height": 262}, {"src": "images/P_020.jpg", "height": 274}, {"src": "images/P_000.jpg", "height": 288}, {"src": "images/P_001.jpg", "height": 288}, {"src": "images/P_002.jpg", "height": 288}, {"src": "images/P_003.jpg", "height": 129}, {"src": "images/P_004.jpg", "height": 284}, {"src": "images/P_005.jpg", "height": 253}, {"src": "images/P_006.jpg", "height": 245}, {"src": "images/P_007.jpg", "height": 343}, {"src": "images/P_008.jpg", "height": 238}, {"src": "images/P_009.jpg", "height": 159}, {"src": "images/P_010.jpg", "height": 289}, {"src": "images/P_011.jpg", "height": 127}, {"src": "images/P_012.jpg", "height": 282}, {"src": "images/P_013.jpg", "height": 144}, {"src": "images/P_014.jpg", "height": 269}, {"src": "images/P_015.jpg", "height": 282}, {"src": "images/P_016.jpg", "height": 142}, {"src": "images/P_017.jpg", "height": 279}, {"src": "images/P_018.jpg", "height": 289}, {"src": "images/P_019.jpg", "height": 262}, {"src": "images/P_020.jpg", "height": 274} ]; var listNum = parseInt((myClient().width - 17) / 192); // 根據窗口寬度和圖片寬度確定列表的數目 滾動條默認17寬，192是圖片寬 var ul; // 申明一個數組用來存每個ul的高度 var heightArr = []; for(var i = 0; i <listNum; i++){ ul = document.createElement('ul'); box.appendChild(ul); heightArr[i] = 0; //剛創建出來的每個ul高度都是0； } // 根據datas裏的數據動態創建li的個數 loadPic(datas);
//當第一次圖片加載完時，如果繼續向下滾，繼續加載，
加載條件是滾動條卷出去寬度+可視寬度大於最小ul時window.onscroll = function(){ //獲取每一次頁面加載後最小那列圖（ul）的高度；
var minVal = getMin(heightArr).value;
//如果我的可視寬度加上被卷出去的高度大於了最小的那列圖
if(myClient().height + myScroll().scrollTop > minVal){ //再加載圖片 loadPic(datas); //這是模擬，用ajax在服務器裏獲取，會有沒圖的時候。。 } }
function createPic(datas) { //根據datas對象的個數創建li for (var i = 0; i < datas.length; i++) { var li = document.createElement("li"); // 依次往每個li裏面添加圖片 li.innerHTML = '<img src="' + datas[i].src + '" alt="">'; //取出數組中最小高度的索引值 var minIndex = getMin(heightArr).index; //然後每次我們往這個最矮的ul里加圖片 // 其實第一輪時，每個ul的高度都是0； lists[minIndex].appendChild(li); //添加圖片後，更新heightArr中每個ul的高度以便下一次的比較 // //由於圖片有加載時間，我們可以從服務器先接回圖片信息 //但是我們沒有服務器，可以在datas中添加當前圖片的信息，在這裏進行獲取 // heightArr[minIndex] += datas[i].height; } } }
//求一組數中的最小值，等會每組圖的列表比較時，會用到它 function getMin(arr) { var minValue = arr[0]; var minIndex = 0; for (var i = 0; i < arr.length; i++) { if (minValue > arr[i]) { minValue = arr[i]; //最小值 minIndex = i; //最小值的索引 } } return { index: minIndex, value: minValue }; }
//用來兼容每個瀏覽器支持的視口的寬度和高度 function myClient() { return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0, height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0 } }
//用來兼容每個瀏覽器支持的頁面被捲曲的高度和寬度 function myScroll() { return { scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0 }; }</script>