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

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

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

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

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

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

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

    了解更多js知識點擊這里。