前言

like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it

起由

最近,在搭建個人博客時，其中的Demo展示頁面想用瀑布流形式展現，發現現有的js插件大多基于JQ的，而我稍微有點小強迫，不想基于JQ，于是就著手自己封裝了一個。順帶就研究了下css3方式實現瀑布流，于是總結了下，寫了幾個示例demo，就有了本文。

幾種常用的瀑布流介紹

一般瀑布流的實現常見有三種方式

• 傳統的多列浮動
• css3樣式定義
• js計算絕對布局

傳統的多列浮動簡介

首先固定屏幕中展示的列數，每一列中間的數據作為一組單獨計算，插入數據時分別插入不同列中
優點:

• 布局最為簡單,一般只依賴與一個浮動布局
• 不需要知道內容的高度，所以當有圖片未加載時也不影響

缺點:

• 只適用于特定的屏幕，當屏幕size變化時，無法動態實現列數的更改
• 拓展不易

css3樣式定義瀑布流簡介

利用css3中特有屬性，在高級瀏覽器中實現瀑布流效果
優點:

• 直接使用css樣式，最為簡潔，不依賴于任何js
• 拓展方便，直接往容器內部添加內容即可
• 自適應，屏幕變化，布局也會變化
• 當各個item的寬度不一致時，這種方式也適用
• 像一些特殊的如固定的兩列瀑布流也可以很方便實現(固定顯示兩列，每一列可以橫著有多個item)

缺點:

• 需要高級瀏覽器支持(其實這個現在已經不算缺點了)
• 這種方式和普通瀑布流的原理有區別，不是分別往不同列中插入數據，而是先往一列中插入數據，達到一定高度后再往其它列中插入數據，有時候用這種方式會達不到預期效果(這個是比較關鍵的，這種方式有時候體驗達不到預期)

js計算絕對布局實現瀑布流簡介

利用js，動態計算元素的插入位置，利用絕對布局absolute進行定位，根據屏幕的不同可以動態調整
優點:

• 便于拓展，方便數據的添加
• 自適應，屏幕變化，布局也會變化

缺點:

• 計算時需要知道內容高度，如果包含圖片，需要等圖片加載完畢再計算，否則會存在誤差
• 各個item的寬度需要一致

** 就實用性而言，傳統的瀑布流比較適合業務場景較為單一的情況，比如手機中固定兩列的情況，css3瀑布流布局由于有時候會造成一些不理想的局面，所以更多的被用在了面試題等上面，最后那張絕對布局的瀑布流方式是被應用的最為廣泛的**

本文主要探討css3瀑布流和絕對定位瀑布流的實現

css3瀑布流的實現

這種實現方式是最為簡單的，僅僅是基于css3的新屬性(column-width或column-count)，

css3中增加了一個新的屬性：column，來實現等高的列的布局效果。該屬性有column-width寬度，column-count數量等，并且能根據窗口自適應。

css實現瀑布流分為兩種效果，普通橫向瀑布流與固定列數的瀑布流

普通橫向瀑布流

這種瀑布流方式常常用于和js絕對布局方式比較，但是雖然從顯示上來說，效果差不多，但是從用戶體驗的角度講，這個不符合平常的習慣，以下是兩種方式的效果圖對比

實現代碼

.container{/*寬*/-webkit-column-width:200px;-moz-column-width:200px; -o-colum-width:200px; /*間距*/ -webkit-column-gap:1px; -moz-column-gap:1px; -o-column-gap:1px; }

固定列數的瀑布流

這種布局用到比較少，但是某些面試題會經常提到，效果如下

實現代碼

.container{/*固定列*//*-moz-column-count:2; -webkit-column-count:2; column-count:2;*//*間距*/-webkit-column-gap:1px; -moz-column-gap:1px; -o-column-gap:1px; }

示例與源碼

想看示例頁面可以戳一戳
css3瀑布流效果
源碼可以查看
https://github.com/dailc/showDemo/blob/master/html/waterfallflow/demo_waterfall_flow_css3.html

js絕對布局瀑布流實現

這種實現方式是最為經典的，也是運營的最多的，網上也有很多的原生或jq插件，本文這里也用原生js重新封裝了一個類庫，方便調用，效果如圖

實現思路

瀑布流的實現思路其實很簡單，如下:

獲取元素容器的總寬度allWith, 每一個瀑布流元素的列寬度 itemWidth(如果大于allwidth,會有一個默認值替代)

計算當前容器可以顯示的列數 column Math.floor(allwidth/itemWidth) 向下取整

添加一個元素前，計算每一列當前的高度，尋找當前高度最小的列，然后根據列的序號k，確定item的left和top，lef=k*itemWidth top=當前列的高度，然后當前列插入這個元素，當前列的高度加上這個元素的高度

所有元素插入完畢后，容器的高度會調整為最大列的高度

初始化就是先讀取頁面的所有元素，然后一個一個插入，加載更多就是在已有的元素基礎上，插入新的元素計算

實現代碼

由于代碼較為占用篇幅，這里就不再贅述，基本根據實現思路都能實現出來，也可以查看下面提供的源碼鏈接

示例與源碼

想看示例頁面可以戳一戳
js瀑布流效果

源碼可以查看
https://github.com/dailc/showDemo/blob/master/html/waterfallflow/demo_waterfall_flow_js.html

參考鏈接

• [瀑布流布局——JS+絕對定位](http://www.cnblogs.com/slowsoul/archive/2013/02/10/2909746.html)
• 基于css3 column-width 實現的瀑布流

標簽:?JavaScript 瀑布流 css3 轉載http://www.cnblogs.com/dailc/p/6058965.html

轉載于:https://www.cnblogs.com/wang1593840378/p/6063595.html

總結

以上是生活随笔為你收集整理的网页瀑布流效果实现的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。