在各個(gè)網(wǎng)頁中，我們經(jīng)常能看到很多大小不一的圖片一個(gè)接一個(gè)的在屏幕中間滾動(dòng)，就像下圖這樣。

    其實(shí)可以看到，這里的文字和圖片并不一定會(huì)對(duì)齊，而是像瀑布一樣連續(xù)不斷，多出現(xiàn)于電商或者視頻網(wǎng)站等地方，這里我們說一下怎么實(shí)現(xiàn)。

第一種方法是通過columns 設(shè)置元素的列數(shù)，這樣就能實(shí)現(xiàn)簡單的瀑布流。需要注意的是需要添加break-inside: avoid;防止圖片被分割。

    第二種方法就是flex，flex是我們寫頁面中使用非常頻繁的方法，三行代碼就能實(shí)現(xiàn)多個(gè)塊元素的垂直水平居中，并且還能根據(jù)寬度自動(dòng)選擇換行或者壓縮。flex還和float浮動(dòng)一樣，能把塊元素在一行顯示，所以我們也可以用flex來實(shí)現(xiàn)瀑布流。大致思路就是我們手動(dòng)選擇需要有幾列，把數(shù)據(jù)分到三個(gè)對(duì)象里，然后v-for循環(huán)三個(gè)對(duì)象，在使用flex弄到一行，就能實(shí)現(xiàn)簡單的瀑布流。

    然后，我們這可是vue，有很多優(yōu)秀的插件包可以使用，這里推薦一下vue-waterfall-plugin。

    首先使用npm install vue-waterfall-plugin安裝依賴。

    只需要引入組件，設(shè)置列表，插件會(huì)自動(dòng)根據(jù)所給的塊元素寬度設(shè)置列數(shù)。

    了解更多js知識(shí)點(diǎn)擊這里。