前言

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

起由

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

幾種常用的瀑布流介紹

一般瀑布流的實(shí)現(xiàn)常見有三種方式

• 傳統(tǒng)的多列浮動
• css3樣式定義
• js計(jì)算絕對布局

傳統(tǒng)的多列浮動簡介

首先固定屏幕中展示的列數(shù)，每一列中間的數(shù)據(jù)作為一組單獨(dú)計(jì)算，插入數(shù)據(jù)時分別插入不同列中
優(yōu)點(diǎn):

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

缺點(diǎn):

• 只適用于特定的屏幕，當(dāng)屏幕size變化時，無法動態(tài)實(shí)現(xiàn)列數(shù)的更改
• 拓展不易

css3樣式定義瀑布流簡介

利用css3中特有屬性，在高級瀏覽器中實(shí)現(xiàn)瀑布流效果
優(yōu)點(diǎn):

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

缺點(diǎn):

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

js計(jì)算絕對布局實(shí)現(xiàn)瀑布流簡介

利用js，動態(tài)計(jì)算元素的插入位置，利用絕對布局absolute進(jìn)行定位，根據(jù)屏幕的不同可以動態(tài)調(diào)整
優(yōu)點(diǎn):

• 便于拓展，方便數(shù)據(jù)的添加
• 自適應(yīng)，屏幕變化，布局也會變化

缺點(diǎn):

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

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

本文主要探討css3瀑布流和絕對定位瀑布流的實(shí)現(xiàn)

css3瀑布流的實(shí)現(xiàn)

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

css3中增加了一個新的屬性：column，來實(shí)現(xiàn)等高的列的布局效果。該屬性有column-width寬度，column-count數(shù)量等，并且能根據(jù)窗口自適應(yīng)。

css實(shí)現(xiàn)瀑布流分為兩種效果，普通橫向瀑布流與固定列數(shù)的瀑布流

普通橫向瀑布流

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

實(shí)現(xiàn)代碼

.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; }

固定列數(shù)的瀑布流

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

實(shí)現(xiàn)代碼

.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絕對布局瀑布流實(shí)現(xiàn)

這種實(shí)現(xiàn)方式是最為經(jīng)典的，也是運(yùn)營的最多的，網(wǎng)上也有很多的原生或jq插件，本文這里也用原生js重新封裝了一個類庫，方便調(diào)用，效果如圖

實(shí)現(xiàn)思路

瀑布流的實(shí)現(xiàn)思路其實(shí)很簡單，如下:

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

計(jì)算當(dāng)前容器可以顯示的列數(shù) column Math.floor(allwidth/itemWidth) 向下取整

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

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

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

實(shí)現(xiàn)代碼

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

示例與源碼

想看示例頁面可以戳一戳
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 實(shí)現(xiàn)的瀑布流

標(biāo)簽:?JavaScript 瀑布流 css3 轉(zhuǎn)載http://www.cnblogs.com/dailc/p/6058965.html

轉(zhuǎn)載于:https://www.cnblogs.com/wang1593840378/p/6063595.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。