很少寫文章，很亂，，見諒。

---

我所見過的瀑布流都是固定的幾列，然后每一列包含若干個元素（圖文元素），每一列的總高度都差不多。
所以我這個組件的功能就很簡單，可以設置列數量，然后只要再寫一個渲染元素的方法，即可使用。

組件說明

組件名：<tag-autoflow />

參數名類型說明

data	Array	數據源
column_size	Number	列的數量
renderItem	Function	目前只能通過render函數渲染子元素，還不支持模板。 有三個參數 h, item,將被渲染的元素 next,是一個function，在渲染子元素的合適時機（例如img的onload事件里），調用next()即可。 如不調用next將只能渲染一個元素，無法繼續渲染。

源代碼在此

一個簡單的使用例子如下：

export default {data() {// 隨機生成20個測試數據const num = 20;var list = new Array(num).fill(0).map((v, i) => {return this.createItem(i);})return {list,}},// 直接用render函數來寫，因為我覺得這樣寫props更直觀一點render(h){return h('tag-autoflow', {props:{// 設置列數量column_size:3,// 數據源data: this.list,// 渲染item的方法，參數目前提供三個// h 瀑布流組件的createElement方法，非父組件的// item 要渲染的元素對象// next 必須主動調用next，插件才會自動去渲染下一個元素，詳細說明見下文renderItem(h, item, next){// 簡單的渲染一個img跟一個p標簽// 因為img標簽的圖片加載需要時間，而圖片影響了計算所在列的高度// 所以需要在img觸發了load事件后，再去調用next渲染下一個item。return h('div', [h('img', {attrs: {src: item.img},on: {load: e => {next();}}}),h('p', item.title)])},},});},methods:{createItem(i) {var title = i + ',' + new Array(_.random(10, 150)).fill('哈').join('');var img = `http://via.placeholder.com/${_.random(100, 400)}x${_.random(100, 400)}`;return {img,title,}},} }

放一張渣渣效果圖吧。。。

代碼里是一次性生成的20個元素，頁面渲染的時候，很明顯的能看出來是在一個img觸發了load事件之后才渲染下一個元素。
如果花點心思加一些動畫效果應該很酷吧。

如果你要渲染的item不包含圖片，純文字的話，可以通過這種寫法調用next。保證了計算列高度的準確性。

renderItem(h, item, next){this.$nextTick(function(){next();});return h('p', item.title); },

瀑布流的流程說明

先根據參數生成對應數量的列，

判斷data是否有元素，沒有就結束。

從data里面shift()拿到一個元素item，

找出當前高度最小的一列，將item放入該列。

渲染item，然后調用next()方法進入2

TODO

• 瀑布流還有個常見的功能就是滾動加載了，目前尚未加入此功能，會盡快加上。

• 元素加載的過渡動畫

總結

以上是生活随笔為你收集整理的用vue.js写的一个瀑布流的组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。