1. 樣式展示
如下圖所示，每個盒子寬高不同，且能夠自適應螢幕變化的布局
2. 原理分析
利用定位，在最短的一列下面進行排列，如下圖所示
容器寬度固定，高度根據自適應【定寬不定高】，一行不能排列時候，換行依次從左往右排列
來自：
**來自：1. 效果圖
可以實現滾動
不加說明文字：
加上說明文字：
2. 元件**：
="waterfull"
>
/h2>
="v-wate***ll-content" id=
"v-wate***ll"
>
for=
"(img, index) in wate***lllist"
:key=
"index"
class
="v-wate***ll-item"
:style=
"">
"img.src" alt=
"">
// 說明文字
"font-size: small;color: #666;margin: 4px;"
>
}<
/p>
"font-size: x-small;color: #9e9e9e;margin: 4px;padding-bottom: 6px;"
>
}<
/p>
<
/div>
<
/div>
<
/div>
<
/template>
export
default},
created()
},mounted()
, methods:
elseif(
this
.wate***llimgwidth &&
!this
.wate***llimgcol)
//初始化偏移高度陣列
this
.wate***lldeviationheight =
newarray
(this
.wate***llimgcol)
;for
(let i =
0; i <
this
.wate***lldeviationheight.length; i++
)this
.imgpreloading()
},//預載入
imgpreloading()
; imgdata.height =
this
.wate***llimgwidth / aimg.width * aimg.height;
imgdata.src =
this
.imglist[i]
; imgdata.title =
'標題'
;// 說明文字（也可以自己寫陣列，或者封裝json資料，都可以，但是前提是你會相關操作，這裡不贅述）
imgdata.info =
'詳情說明：啦啦啦啦啦'
;// 說明文字
this
.wate***lllist.
push
(imgdata)
;this
.rankimg
(imgdata);}
}},//瀑布流布局
rankimg
(imgdata)
=this
;let minindex =
this
.filtermin()
; imgdata.top = wate***lldeviationheight[minindex]
; imgdata.left = minindex *
(wate***llimgright + wate***llimgwidth)
;// wate***lldeviationheight[minindex] += imgdata.height + wate***llimgbottom;// 不加文字的盒子高度
wate***lldeviationheight[minindex]
+= imgdata.height + wate***llimgbottom +56;
// 加了文字的盒子高度，留出文字的地方（這裡設定56px）
console.
log(imgdata);}
,/**
* 找到最短的列並返回下標
* @returns 下標
*/filtermin()
}}<
/script>
.waterfull
.v-wate***ll-content
.v-wate***ll-item
.v-wate***ll-item img
<
/style>
瀑布流布局
最近在看瀑布流布局，覺得很神奇，每個模組都可以找到自己應該在的地方，各列齊頭並進，給人一種很high的感覺。一開始自己也想了思路 模組1，模組2，裡面模組float left。結果試了一下，悲劇啊，不同高度的直接就掛了，布局亂了。等高的還可以。然後我又想分類，就是規定幾列，分別把模組順序載入在各個c...
瀑布流布局
很早以前我就想自己學寫一下瀑布流布局，可是由於懶神來找我聊天咯，所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間，所以我是先看咯一下那些大神的具體講解和分析，然後才開始著手寫的，收穫那是槓槓的。1 大家都知道要想實現瀑布流，就必須規定每乙個區塊的寬度要一致 2 確定每一排...
瀑布流布局
mark之，蘑菇街，點點網，以及 最新上線的 哇哦 等等，倒是很流行哈 在 即將上線的眾多產品中，你還會大量看到這樣的形式呢。這種布局適合於小資料塊，每個資料塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部。所以，我們給這樣的布局起了乙個形象的名字 瀑布...