javascript自適應寬度的瀑布流實作思路_javascript技巧

這樣的佈局並不陌生，從2011年Pinterest創立以來，中國互聯網就迅速掀起了一股模仿Pinterest的熱潮，國內有眾多網站採用瀑布流的佈局方式，例如花瓣網、美麗說等等。而事實上在中國互聯網，模仿一些在國外被人看好的模式（當然，你也可以說是山寨或抄襲，呵呵！！）向來都是一個不錯的idea。

OK，現在進入正題。這裡主要介紹瀑布流的一種實作方法：絕對定位(css) javascript ajax json。簡單一點如果不做滾動載入的話就是絕對定位(css) javascript了，ajax和json是滾動載入更多內容的時候用到的。

以下是實現思路：

1、計算頁面的寬度，計算出頁面可放資料區塊的列數（如上圖所示就有6列）。

2、將各個資料塊的高度尺寸記入數組中（需要等所有圖片載入完成，否則無法知道圖片的高度）。

3、用絕對定位先填滿頁面第一行填滿，因為第一行的top位置都是一樣的，然後用陣列記錄每一列的總高度。

4、繼續用絕對定位將其他資料塊定位在最短的一列的位置之後然後更新該列的高度。

5、當瀏覽器視窗大小改變時，重新執行一次上面1-4步驟以重新排放（列數隨頁寬而改變，因而需要重新排放）。

6、滾動條滾動到底部時載入新的資料進來後也是定位在最短的一列的位置之後然後更新該列的高度。

思路有了，然後就是如何用程式碼實作。當然，如果看完以上的6個步驟你已經知道如何實現，那麼下面的內容大可不必細看。

先在頁面上寫好基本的HTML和CSS（為方便起見，CSS就不外聯了），程式碼如下：

複製程式碼 程式碼如下:

• 图片标题1


• 图片标题2


• 图片标题3


• 图片标题4


• 图片标题5


• 图片标题6


• 图片标题7


• 图片标题8


• 图片标题9


• 图片标题10


• 图片标题11


• 图片标题12


• 图片标题13


• 图片标题14


• 图片标题15


• 图片标题16


• 图片标题17


• 图片标题18


• 图片标题19


• 图片标题20

以上程式碼非常簡單，可以看出頁面最初將會先載入20個資料區塊。值得一提的是在CSS裡面定義了opacity為0，目的是在資料塊未排放好之前先隱藏起來，排放好後再將opacity設為1顯示出來，另外這裡用了css3的transition做一點體驗上的升級；還有一點就是可以看到頁面底部有一個id為「loading」的DIV，用來表示資料正在載入中。下面開始用JS實作以上思路（6個步驟）。

1、計算頁的寬度，計算出頁面可放資料區塊的列數

複製程式碼

複製程式碼

程式碼如下:

ul.style.width = iw * c - mh "px";//設定ul的寬度至適合便可以利用css定義的margin把所有內容居中
}

註解寫得非常明白，這一步不說應該都很容易懂。

2、將各個資料區塊的高度尺寸記入數組

複製程式碼

複製程式碼


程式碼如下:

var liLen = li.length;
var lenArr = [];
for (var i = 0; i lenArr.push(li[i].offsetHeight); } } 由於資料塊裡面含有圖片，也沒有給定圖片的尺寸，所以需要等待圖片載入完成後方可取得其高度；那麼可以在window.onload的時候呼叫flow方法。程式碼變成：

複製程式碼


程式碼如下:

for (var i = 0; i lenArr.push( li[i].offsetHeight); }
} //圖片載入完成後執行

window.onload = function() {flow(10, 10)}; script>3、用絕對定位先將頁面第一行填滿，因為第一行的top位置都是一樣的，然後用數組記錄每一列的總高度。

複製程式碼 程式碼如下:

截至目前為止，可以到瀏覽器裡面預覽一下效果：

OK，接下來開始放置其他的資料塊了，也就是到思路的第4步了。

4、繼續用絕對定位將其他資料塊定位在最短的一列的位置之後然後更新該列的高度。

複製程式碼 程式碼如下:

到這一步可以到瀏覽器裡面再看一次效果，可以說整個瀑布流的雛形都出來了：

5、當瀏覽器視窗大小改變時，重新執行一次上面1-4步以重新排放

這一步驟操作起來也相當便捷，在改變視窗大小時，再執行一次flow方法即可

複製程式碼 程式碼如下:

這裡值得注意的便是setTimeout，由於onresize的觸發頻率非常高，用setTimout設定一個間隔時間可以減低flow方法的執行頻率，降低效能損耗。

6、滾動條滾動到底部時載入新的資料進來後也是定位在最短的一列的位置之後然後更新該列的高度。

複製程式碼 程式碼如下:

})(); } else { parent.appendChild(child); } } //取得數字數組的最大值function _getMaxValue(arr) { //... 省略部份代碼... } //取得數字數組最小值的索引function _getMinKey(arr) { //... 省略部份代碼... }
這一步涉及的程式碼比較多，簡單概括其實就是多了幾個方法：scroll()、_addItem()、_request()、_appendhtml()。

主要是看scroll()。這裡_addItem()和_requeat()是供scroll()呼叫的，而_appendhtml()是給_addItem()呼叫的。

這一步驟的整個過程是：當頁面滾動到最短的一列數據的底部時就發出ajax請求加載新的數據，然後待數據中的圖片全部load完後就追加到頁面上，然後將這些數據項的高度寫入到數組lenArr中，並對新加入的這些資料項目進行定位，按照每一項都放在最短列的後面的規則而排放在適當的位置上，最後再將loading圖片向下移到最底部的位置。

總結以上的整個思路，有4個地方值得一說：

1、縮放瀏覽器視窗時，onresize的觸發很頻繁，為降低效能損耗，需要待縮放結束後再執行重排，以上思路是使用setTimeout來處理。

2、頁面捲動到最下面載入新資料的時候，只要對新資料排列。

3、以上思路中載入新資料要等圖片都載入完成後才知道其高度，但實際專案中最好是伺服器能給定高度值。

4、滾動觸發載入新資料時，要避免事件多次觸發，以上思路是將onscroll事件置為空，載入完成後再將事件恢復。

最後附上完整的程式碼：
flow.html

複製程式碼

複製程式碼 程式碼如下:

 

• 图片标题1


• 图片标题2


• 图片标题3


• 图片标题4


• 图片标题5


• 图片标题6


• 图片标题7


• 图片标题8


• 图片标题9


• 图片标题10


• 图片标题11


• 图片标题12


• 图片标题13


• 图片标题14


• 图片标题15


• 图片标题16


• 图片标题17


• 图片标题18


• 图片标题19


• 图片标题20

GetList.php

複製程式碼 程式碼

複製程式碼

程式碼

header("Content-Type:application/json;charset=utf-8");
echo('{"d": [
{"img": "http ://www.mitxiong.com/NewsImages/2012121821504156.jpg", "title": "圖片1"},
{"img": "http://www.mitxiong.com/NewsImages/201211271824173112220jpg ", "title": "圖片2"},
{"img": "http://www.mitxiong.com/NewsImages/2012111806582944.jpg", "title": "圖片3"},
{"img": "http://www.mitxiong.com/NewsImages/2012110907231232.jpg", "title": "圖片4"},
{"img": "http://www.mitxiong .com/NewsImages/2012110406319529.jpg", "title": "圖片5"},
{"img": "http://www.mitxiong.com/NewsImages/2012101808066955.jpg", "title" "圖片6"},
{"img": "http://www.mitxiong.com/NewsImages/2012101307276582.jpg", "title": "圖片7"},
{"img": "http://www.mitxiong.com/NewsImages/2012082223432719.jpg", "title": "圖片8"},
{"img": "http://www.mitxiong.com/NewsImages/2012082121509065 .jpg", "title": "圖片9"},
{"img": "http://www.mitxiong.com/NewsImages/2012081922387254.jpg", "title": "圖片10"},
{"img": "http://www.mitxiong.com/NewsImages/2012081700252403.jpg", "title": "圖11"},
{"img": "http://www .mitxiong.com/NewsImages/2012081407597304.jpg", "title": "圖片12"},
{"img": "http://www.mitxiong.com/NewsImages/2012081218248259. ": "圖片13"},
{"img": "http://www.mitxiong.com/NewsImages/2012080621278799.jpg", "title": "圖14"},
{"img ": "http://www.mitxiong.com/NewsImages/2012072907484455.jpg", "title": "圖片15"},
{"img": "http://www.mitxiong.com/NewsImages /2012072521564314.jpg", "title": "圖片16"},
{"img": "http://www.mitxiong.com/NewsImages/2012072507238259.jpg", "title": "圖片17" },
{"img": "http://www.mitxiong.com/NewsImages/2012072409035684.jpg", "title": "圖18"},
{"img": "http:/ /www.mitxiong.com/NewsImages/2012072219405236.jpg", "title": "圖片19"},
{"img": "http://www.mitxiong.com/NewsImages/2012071218416980. "title": "圖片20"}

]}'); ?>