最近寫介面，需要使用瀑布流方式顯示商品，網上找了很多方法，效果都不是很理想。
咱對這瀑布流的要求也不高，只要兩列商品正常顯示互不影響就行了。
思考了下，決定使用flex布局分成n列，每列的商品就不會互相影響，
大致思考的布局是這樣。
先是對介面進行布局，使用flex布局將容器劃分為n列。
**中分成了兩列，實際上對任意列數都適用。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
vue中實現瀑布流
瀑布流的參考實現可以看這篇部落格 3種方式實現瀑布流布局 flex布局實現 box item column布局實現 box item css實現有個缺點，它的實現原理是按列來排，先排滿第一列，排不滿的進入第二頁，這個時候最後的呈現效果就可能存在最後一行時，中間有個塊，顯示不好。另外還可能出現下面這種...
Vue瀑布流外掛程式
我自己寫的乙個的vue瀑布流外掛程式，列數自適應，不用設定每個卡片的高度。測試頁面 page.vue 模板頁面 waterfollow.vue 和 wfcolumn.vue 在page.vue中，修改itemw的值，設定每列的最小寬度。例如 itemw 200 意為200px list為陣列。高度不...
瀑布流實現
html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...