資訊專欄INFORMATION COLUMN
摘要：有三個(gè)參數(shù)將被渲染的元素是一個(gè)，在渲染子元素的合適時(shí)機(jī)例如的事件里，調(diào)用即可。從里面拿到一個(gè)元素，找出當(dāng)前高度最小的一列，將放入該列。渲染，然后調(diào)用方法進(jìn)入瀑布流還有個(gè)常見的功能就是滾動(dòng)加載了，目前尚未加入此功能，會(huì)盡快加上。
很少寫文章，很亂，，見諒。
我所見過的瀑布流都是固定的幾列，然后每一列包含若干個(gè)元素（圖文元素），每一列的總高度都差不多。
所以我這個(gè)組件的功能就很簡(jiǎn)單，可以設(shè)置列數(shù)量，然后只要再寫一個(gè)渲染元素的方法，即可使用。
組件名：
| 參數(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è)元素，無(wú)法繼續(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è)元素，頁(yè)面渲染的時(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)畫
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87358.html
摘要：正如上篇文章說的，由于項(xiàng)目中的樣式有點(diǎn)特殊要求，所以自己在項(xiàng)目中寫了一個(gè)瀑布流組件，在這里分享下，由于最近沒太多時(shí)間，趁中秋把這個(gè)組件發(fā)上來，寫的不是很詳細(xì)，畢竟中秋，我的心已經(jīng)發(fā)出去啦。 ng-water-scroll 正如上篇文章說的，由于項(xiàng)目中的樣式有點(diǎn)特殊要求，所以自己在項(xiàng)目中寫了一個(gè)瀑布流組件，在這里分享下，由于最近沒太多時(shí)間，趁中秋把這個(gè)組件發(fā)上來，寫的不是很詳細(xì)，畢竟中秋...
摘要：在剛剛結(jié)束的交易系統(tǒng)項(xiàng)目中有幾個(gè)需求是讓我感覺要花點(diǎn)時(shí)間的如何更優(yōu)雅的使用的框。通過鍵盤實(shí)現(xiàn)多選，批量選的功能。所以自己寫了后面兩個(gè)指令。 在剛剛結(jié)束的angular交易系統(tǒng)項(xiàng)目中有幾個(gè)需求是讓我感覺要花點(diǎn)時(shí)間的 如何更優(yōu)雅的使用angular-bootstrap 的 Modal框。 通過鍵盤實(shí)現(xiàn)ctrl多選，shfit批量選的功能。 如何在angular去實(shí)現(xiàn)瀑布流 后面兩個(gè)我都...
摘要：不需知道元素寬高，可寬高自適應(yīng)自定義程度高支持懶加載提供端滑動(dòng)到底部觸發(fā)，端需要上拉觸發(fā)使用極為簡(jiǎn)便適用于有問題歡迎提前端工程化算法注意需要與一起使用才會(huì)生效，否則會(huì)進(jìn)行自適應(yīng)寬度使用布局時(shí)，需先計(jì)算出自適應(yīng)后的寬度再傳值使用了的 vue-waterfall2 1.不需知道元素寬高，可寬高自適應(yīng) 2.自定義程度高 3.支持懶加載(lazy-src) 4.提供Event:loadmor...
摘要：哪吒別人的看法都是狗屁，你是誰(shuí)只有你自己說了才算，這是爹教我的道理。哪吒去他個(gè)鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰(shuí)和你做朋友太乙真人人是否能夠改變命運(yùn)，我不曉得。我只曉得，不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要：相關(guān)組件版本最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測(cè)試的結(jié)果很令人沮喪，依然沒有控制節(jié)點(diǎn)的位置，所以應(yīng)該不是這個(gè)問題。 相關(guān)組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發(fā)后臺(tái)...
閱讀 1662·2021-10-25 09:46
閱讀 3270·2021-10-08 10:04
閱讀 2405·2021-09-06 15:00
閱讀 2825·2021-08-19 10:57
閱讀 2112·2019-08-30 11:03
閱讀 1014·2019-08-30 11:00
閱讀 2422·2019-08-26 17:10
閱讀 3588·2019-08-26 13:36
