Pinterest採用瀑布流的方式網頁設計

來源:互聯網
上載者:User

文章描述:淺談個人在瀑布流網頁的實現中遇到的問題和解決方案.

先上Demo

瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.html

瀑布流+無限拖 http://cued.xunlei.com/demos/publ/demo2.html

隨著pinterest的走紅,瀑布流式的布局被越來越多的網站所使用,這種布局確實有很多好處,圖片列表頁有很強大的視覺感染力,而且還提高了使用者“發現好圖”的效率。瀑布流的實現有很多種方式,之前淘寶UED有篇文章詳細的介紹過各種方式的優劣。今天我們主要討論一下絕對排序來實現瀑布流的方式 即 Pinterest 採用的方式。

首先說下瀑布流的排序演算法,參考demo1,思路非常簡單,我們把瀑布流拆成三個部分來看:容器、列、格子

1.先計算當前螢幕最多能容納幾列瀑布,其值為 “向下取整(螢幕可見地區寬度/(格子寬度+間距))”;

2.為了保證容器的置中,將容器的寬度設定為 列數* (格子寬度+間距) – 間距,這裡需要注意的是 當容器的寬度計算出來之後再顯示,否則會造成頁面寬度的抖動,影響體驗。;

3.排序開始,先把前N(N為列數)個格子分別放到每一列中,然後每次尋找高度最小的一列,把格子放進去(left值為列序號*(格子寬度+間距),top值為 列高+間距),並重新整理列的高度,遍曆所有格子直到所有的格子都被排序。

最後將事件控制代碼綁定到window.onload和window.onresize上,一個瀑布流布局的頁面就出來了。

這樣的排序演算法看起來很美好,可真正結合非同步載入資料應用到頁面裡還要解決以下幾個問題

1.當縮放瀏覽器視窗時會不斷地觸發事件,如果每次都響應的話會狂耗效能,需要在縮放動作結束後再執行重排方法。

2.頁面滾動到底部請求資料成功之後只對新增的節點重排。

3.如果伺服器無法給出圖片高度,需要在圖片載入完畢之後再進行重排。

第一個問題我是用setTimeout和clearTimeout來解決的,思路是視窗變化之後開始計時,如果視窗還在變換則從新開始計時,視窗不再變化則延時(很短的時間)觸發重排事件。暫時只想到這個,這裡應該還有更好的方法。

代碼如下

var re;
window.onresize = function() {
clearTimeout(re);
re = setTimeout(resize,100);
};

第二個問題在於如果每次有新的資料載入,都要對整個容器內的節點進行重排,非常消耗效能。解決思路:

1.將列儲存在全域數組中,每次重排或者新增格子之後更新數組的資料,這樣下次執行排序演算法的時候可以直接調用。

2.將新增格子儲存在數組中作為參數傳遞給排序演算法,僅對新格子進行遍曆和操作。

第三個問題是如果伺服器無法給出圖片尺寸,那麼必須在圖片完全載入完畢之後才可進行排序(因為高度是即時擷取的,圖片不全高度有誤差),這裡沒有什麼好辦法,只能遍曆圖片,每張圖片載入成功後執行一個回呼函數,將載入成功的圖片數量+1,當載入成功的圖片數量等於圖片總數的時候執行排序方法。缺點是有一張圖片載入不成共就無法看到所有的,真正項目中還是需要在非同步載入資料的時候擷取圖片尺寸。

好了,以上就是在這次瀑布流實現過程中遇到的問題和解決方案,由一開始載入3-4屏就卡死到現在可以無限載入(ff,chrome),深感最佳化js的必要性和無限性。一點小心得寫在這裡權當拋磚引玉,大家對瀑布流實現的最佳化有什麼見解歡迎一起交流討論。

作者:xwei



相關關鍵詞:
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。