在各個網頁中，我們經常能看到很多大小不一的圖片一個接一個的在屏幕中間滾動，就像下圖這樣。
其實可以看到，這里的文字和圖片并不一定會對齊，而是像瀑布一樣連續不斷，多出現于電商或者視頻網站等地方，這里我們說一下怎么實現。
第一種方法是通過columns 設置元素的列數，這樣就能實現簡單的瀑布流。需要注意的是需要添加break-inside: avoid;防止圖片被分割。
第二種方法就是flex，flex是我們寫頁面中使用非常頻繁的方法，三行代碼就能實現多個塊元素的垂直水平居中，并且還能根據寬度自動選擇換行或者壓縮。flex還和float浮動一樣，能把塊元素在一行顯示，所以我們也可以用flex來實現瀑布流。大致思路就是我們手動選擇需要有幾列，把數據分到三個對象里，然后v-for循環三個對象，在使用flex弄到一行，就能實現簡單的瀑布流。
然后，我們這可是vue，有很多優秀的插件包可以使用，這里推薦一下vue-waterfall-plugin。
首先使用npm install vue-waterfall-plugin安裝依賴。
只需要引入組件，設置列表，插件會自動根據所給的塊元素寬度設置列數。
了解更多js知識點擊這里。
上一篇： js中如何使用php的數據
下一篇： uniapp中調用相機掃碼
