这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
效果如图所示:
采用了预先加载图片,再计算高度的办法。。网络差的情况下,可能有点卡
新建 vue-water-easy.vue 组件文件
<template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(items,clos) in list" :key="clos" :style="waterStyle" class="colsW"> <ul> <li v-for="(item,index) in items" :key="index" :style="{marginBottom:gap+'px'}"> <slot :item="item" :index="index" :clos="clos"></slot> </li> </ul> </div> </div> </template> <script> export default { props:{ maxCols:{ type:Number, default:3, validator(value){ return value > 1; } }, srcKey:{ type:String, default:"src" }, gap:{ type:Number, default:10, validator(value){ return value > 0; } }, imgsArr:{ type:Array, required:true } }, computed:{ waterStyle(){ if(this.gap <= 0){ this.gap = 10; } return { margin:`0 ${this.gap/2}px` } } }, watch:{ imgsArr(val){ this.$nextTick(()=>{ this.list = this.initData(); this.start(0); }) } }, data(){ let list = this.initData(); return { list:list } }, mounted(){ this.start(0); }, methods:{ initData(){ let list = new Array(this.maxCols); for(let i = 0; i < this.maxCols ; i++){ list[i] = []; } return list; }, start(i){ const me = this; let imgsArr = me.imgsArr; if(i >= imgsArr.length && this.$refs.waterWrap){ return ; } me.loadImg(imgsArr[i],i).catch(()=>{ }).finally(()=>{ me.start(++i); }); // for(let i = 0; i < imgsArr.length; i++ ){ // let item = imgsArr[i]; // me.loadImg(item,i); // } }, loadImg(item){ const me = this; let srcKey = me.srcKey; return new Promise(function(resolve,reject){ if(item && item[srcKey]){ let src = item[srcKey]; let img = new Image(); img.src = src; img.crossOrigin = "anonymous"; img.onload = function(){ var index = me.getMinHeight(); me.list[index].push(item); me.$nextTick(()=>{ resolve(img) }); } img.onerror = function(e){ reject(e); } }else{ reject('数据错误'); } }) }, getMinHeight(){ let index = 0; try{ if(!this.$refs.waterWrap){ return index; } let childs = this.$refs.waterWrap.children || []; let minx = childs[0].children[0].offsetHeight; for(let i = 1; i < childs.length; i++){ let element = childs[i]; let h = element.children[0].offsetHeight; if(h < minx){ minx = h ; index = i; } } }catch(e){ console.warn(e); return index; } return index; } } } </script> <style lang="scss" scoped> .vue-water-easy{ width: 100%; display: flex; justify-content: space-between; div.colsW{ flex: 1; box-sizing: border-box; position: relative; &:last-child{ margin-right: 0 !important; } &:first-child{ margin-left: 0 !important; } ul{ list-style: none; width: 100%; li{ width: 100%; } } } } </style>
使用
<vueWaterEasy :imgsArr="imgsArr" srcKey="url"> <template v-slot="{item}"> <img :src="/UploadFiles/2021-04-02/item.url">imgsArr:为图片数据的数组,内部包含对象 [ { src:"xxxx" } ]
srckey : 为图片路径的属性,默认为 src
maxCols: 多少列 默认为 3
gap : 每列的间距默认 10px
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路