咨詢熱線: 18055817568
您當前所在位置: 首頁 > 新聞資訊 > 行業動態

網頁瀑布流布局淺析-前端工程師必學

點擊數:16902012-10-25 16:15:25 來源:稻殼網

新聞摘要:如果你經常網上沖浪,這樣參差不齊的多欄布局,是不是很眼熟啊?   類似的布局,似乎一夜之間出現在國內外大大小小的網站上,比如視覺社交目錄網站Pinterest(貌似是最早使用這種布局的網站了),Mark之 ,蘑菇街,點點網,以及淘寶最新上線的"哇哦" 等等。   這種布局適合于小數據塊,每個數據塊內容相近且沒有側重。通常,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊并附加至當前尾部。所以,我們給這樣的布局起了一個形象的名字 - 瀑布流式布局。

  如果你經常網上沖浪,這樣參差不齊的多欄布局,是不是很眼熟啊?

  類似的布局,似乎一夜之間出現在國內外大大小小的網站上,比如視覺社交目錄網站Pinterest(貌似是最早使用這種布局的網站了),Mark之 ,蘑菇街,點點網,以及淘寶最新上線的"哇哦" 等等。

  這種布局適合于小數據塊,每個數據塊內容相近且沒有側重。通常,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊并附加至當前尾部。所以,我們給這樣的布局起了一個形象的名字 - 瀑布流式布局。

  1、視覺社交目錄網站Pinterest 簡介

  Pinterest是一個自稱"個人版獵酷工具"的視覺社交目錄網站,看起來像是一面虛擬的靈感墻,收藏豐富多元的設計、視覺藝術圖片。以板 (Pinboards)做為單位,可以釘(pin)你喜愛的收藏,書簽功能一鍵式抓取圖片聚合到自己的Pinterest頁面上。也可以follow不同人的品味,整體概念不錯。目前網站收集的都是高品質照片。最贊頁面底端自動加載無需翻頁功能,讓用戶不斷發現新圖片。

  2、幾種實現方式

  隨著越來越多設計師愛用這種布局,我們作為前端,要盡可能滿足視覺/交互設計師的需求。所以,我們整理了下這種布局的幾種實現方式,有三種:

  1) 傳統多列浮動。即 蘑菇街和哇哦 采用的方式,如下圖所示:

  各列固定寬度,并且左浮動;

  一列中的數據塊為一組,列中的每個數據塊依次排列即可;

  更多數據加載時,需要分別插入到不同的列上;

  線上例子 http://wow.taobao.com/)。

  優點:

  布局簡單,應該說沒啥特別的難點;

  不用明確知道數據塊高度,當數據塊中有圖片時,就不需要指定圖片高度。

  缺點:

  列數固定,擴展不易,當瀏覽器窗口大小變化時,只能固定的x列,如果要添加一列,很難調整數據塊的排列;

  滾動加載更多數據時,還要指定插入到第幾列中,還是不方便。

  2) CSS3 定義。W3C 中有講述關于多列布局的文檔 ,排列出來的樣子:

  由 chrome/ff 瀏覽器直接渲染出來,可以指定容器的列個數,列間距,列中間邊框,列寬度來實現;

  #container {

  -webkit-column-count: 5;

  /*-webkit-column-gap: 10px;

  -webkit-column-rule: 5px solid #333;

  -webkit-column-width: 210px;*/

  -moz-column-count: 5;

  /*-moz-column-gap: 20px;

  -moz-column-rule: 5px solid #333;

  -moz-column-width: 210px;*/

  column-count: 5;

  /*column-gap: 10px;

  column-rule: 5px solid #333;

  column-width: 210px;*/

  }

  column-count 為列數; column-gap 為每列間隔距離; column-rule 為間隔邊線大小; column-width 為每列寬度; 當只設置 column-width 時,瀏覽器窗口小于一列寬度時,列中內容自動隱藏; 當只設置 column-count 時,平均計算每列寬度,列內內容超出則隱藏; 都設了 column-count 和column-width,瀏覽器會根據 count 計算寬度和 width 比較,取大的那個值作為每列寬度,然后當窗口縮小時,width 的值為每列最小寬度。這邊其實很簡單,簡易自己嘗試下,詳細可參考 https://developer.mozilla.org/en/CSS3_Columns 中的說明。

  線上例子

  優點:

  直接 CSS 定義,最方便了;

  擴展方便,直接往容器里添加內容即可。

  缺點:

  只有高級瀏覽器中才能使用;

  還有一個缺點,他的數據塊排列是從上到下排列到一定高度后,再把剩余元素依次添加到下一列,這個本質上就不一樣了;

  鑒于這兩個主要缺點,注定了該方法只能局限于高端瀏覽器,而且,更適合于文字多欄排列。

  3) 絕對定位。即 Pinterest ,Mark之,KISSY 采用的方式:

  可謂是最優的一種方案,方便添加數據內容,窗口變化,列數/數據塊都會自動調整;

  線上例子

  缺點:

  需要實現知道數據塊高度,如果其中包含圖片,需要知道圖片高度;

  JS 動態計算數據塊位置,當窗口縮放頻繁,可能會狂耗性能。

  3、KISSY.Waterfall 實現思路

  KISSY 的 Waterfall 組件主要包含兩個部分,一個是對現有數據塊進行排列計算各自所在的位置; 二是下拉滾動時,觸發加載數據操作,并把數據添加到目標容器中。

  1) 數據塊排列,算法步驟簡述下:

  初始化時,對容器中已有數據塊元素進行第一次計算,需要用戶給定: a,容器元素 - 以此獲取容器總寬度; b,列寬度; c,最小列數; 最終列數取的是容器寬度/列寬度和最小列數的最大值,這樣保證了,當窗口很小時,仍然出現最小列數的數據;

  獲得列數后,需要保存每個列的當前高度,這樣在添加每個數據塊時,才知道起始高度是多少;

  依次取容器中的所有數據塊,先尋找當前高度最小的某列,之后根據列序號,確定數據塊的left,top值,left 為所在列的序號乘以列寬,top 為所在列的當前高度,最后更新所在列的當前高度加上這個數據塊元素的高度,至此,插入一個元素結束;

  當所有元素插入完畢后,調整容器的高度為各列最大的高度值,結束依次調整;

  性能效率上的注意點: a,如果當前正在調整中,又觸發了 resize 事件,需要將上次調整暫停后執行這次調整(見 timedChunk 函數); b,resize 觸發會很頻繁,可以將回調函數緩存一段時候后執行,即當這段時間內多次觸發了resize事件,但回調函數只會執行一次(見 S.buffer 函數)。

  2) 異步加載數據,前面講的是如何對容器中已有元素進行排列,但很多情況下,還需要不斷加載新數據塊,為此專門設計了一個獨立的模塊 KISSY.Waterfall.Loader,其實這個功能就更簡單了,僅包含兩個步驟:

  綁定滾動事件,并確定預加載線高度值,即滾動到哪個高度后,需要去加載數據,其實這個就是列的最小高度值,這樣當前滾動值和最小高度值比較一下即可判斷出來,是否要觸發加載數據;

  加載數據,為了不對數據源做太多限制,完全由使用者自己決定數據源從哪邊獲取和其格式,這樣更好的方便用戶使用。為此,該組件只提供一個load(success,end) 接口,怎樣load 由用戶自己去定義,而其中的 success/end,分別給出如何添加新數據(suceess 即同 addItems)/如何停止加載的接口。

  4、KISSY.Waterfall 示例和文檔

  Waterfall API 文檔 (http://docs.kissyui.com/docs/html/api/component/waterfall/),相關構造器,配置項,方法都在這里;

  示例 (http://docs.kissyui.com/docs/html/demo/component/waterfall/),包含靜態和動態兩種。

新聞資訊 news
分享到新浪微博 分享到新浪微博 分享到新浪微博 分享到新浪微博
關于我們 網站建設 網站超市 案例展示 新聞資訊 我要建站 在線留言 聯系我們
Copyright ? 2013 - 2014 .All Rights Reserved - 網聯科技- 聯系電話:18055817568 15695588900 在線QQ:709129729 52978078 E-mail:[email protected]
在線客服
广东36选7彩票开奖 玩吧大众麻将规则 3元进的 2.5卖不差称怎么赚钱 喜乐彩票客户端app 足彩进球彩 时时彩最快开奖 快乐时时彩官方网址 福建体育彩票官方网站 j吉林11选5开奖结果 天津十一选五 贵州快3玩法及开奖直播视频 有没有什么新的赚钱软件下载 浙江体彩20选5开奖走势 预测青海十一选五开奖结果今天晚上 新推荐一注双色球号码查询 四季彩票安全吗 3d试机号