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

---

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

組件說明

組件名：<tag-autoflow />

參數(shù)名類型說明

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

源代碼在此

一個(gè)簡(jiǎn)單的使用例子如下：

export default {data() {// 隨機(jī)生成20個(gè)測(cè)試數(shù)據(jù)const num = 20;var list = new Array(num).fill(0).map((v, i) => {return this.createItem(i);})return {list,}},// 直接用render函數(shù)來寫，因?yàn)槲矣X得這樣寫props更直觀一點(diǎn)render(h){return h('tag-autoflow', {props:{// 設(shè)置列數(shù)量column_size:3,// 數(shù)據(jù)源data: this.list,// 渲染item的方法，參數(shù)目前提供三個(gè)// h 瀑布流組件的createElement方法，非父組件的// item 要渲染的元素對(duì)象// next 必須主動(dòng)調(diào)用next，插件才會(huì)自動(dòng)去渲染下一個(gè)元素，詳細(xì)說明見下文renderItem(h, item, next){// 簡(jiǎn)單的渲染一個(gè)img跟一個(gè)p標(biāo)簽// 因?yàn)閕mg標(biāo)簽的圖片加載需要時(shí)間，而圖片影響了計(jì)算所在列的高度// 所以需要在img觸發(fā)了load事件后，再去調(diào)用next渲染下一個(gè)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,}},} }

放一張?jiān)Ч麍D吧。。。

代碼里是一次性生成的20個(gè)元素，頁面渲染的時(shí)候，很明顯的能看出來是在一個(gè)img觸發(fā)了load事件之后才渲染下一個(gè)元素。
如果花點(diǎn)心思加一些動(dòng)畫效果應(yīng)該很酷吧。

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

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

瀑布流的流程說明

先根據(jù)參數(shù)生成對(duì)應(yīng)數(shù)量的列，

判斷data是否有元素，沒有就結(jié)束。

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

找出當(dāng)前高度最小的一列，將item放入該列。

渲染item，然后調(diào)用next()方法進(jìn)入2

TODO

• 瀑布流還有個(gè)常見的功能就是滾動(dòng)加載了，目前尚未加入此功能，會(huì)盡快加上。

• 元素加載的過渡動(dòng)畫

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。