这篇文章主要介绍了通过某视频剪辑软件写一个瀑布流插件代码实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考下

效果如图所示：

采用了预先加载图片，再计算高度的办法。网络差的情况下，可能有点卡

新建vue-水-放松，vue组件文件

模板div class=' vue-water-easy ' ref=' water wrap ' div-for='(items，clos)在列表： key=' clos ' : style=' water style ' class=' colsW ' ul Li v-for='(项目，索引)在items ' : key=' index ' : style=' { marginbottom : gap ' px ' } '槽： items=' items ' 3:0} }，srcKey: { type:String，default:'src' }，gap:{ type:Number，default:10，validator(value){ 0返回值0;} }，imgsArr:{ type:Array，required:true } }，computed : { waterStyle(){ if(this。gap=0){ this。gap=10}返回{ margin : ` 0 $ { this。gap/2 } px `} }，watch:{ imgsArr(val){ this .$ NextTick(()={ this。列表=这个。initdata()；这个。开始(0)；}) } }，data(){ let list=this。initdata()；返回{ list:list } }，mounted(){ this。开始(0)；}，方法： { initData(){ let list=new Array(this。maxcols)；用于(设I=0；I this . maxcolsi){ list[I]=[]；}返回列表；},开始(I){ const me=this；让imgsArr=me . imgsarrif(I=imgsArr . length this .参考文献。水包裹){返回；} me.loadImg(imgsArr[i]，I).catch(()={ }).最后(()={我。开始(一)；});//用于(设I=0；I imgsarr . lentigi){//让item=IMgsarr[I]；//me.loadImg(第我项);//} }，LoadIMg(item){ const me=this；让srcKey=me.srcKey返回新的承诺(函数（解析，拒绝){ if(item item[srcKey]){ let src=item[srcKey]；让img=new Image()；' img.src=srcimg.crossOrigin='匿名；img。onload=function(){ var index=me。getminhAiR()；me.list[index].推送（项目);我$ NextTick(()={ resolve(img)})；} img。一个rror=函数(e){ reject(e)；} }else{ reject('数据错误');} }) }，getminhAiR(){ let index=0；请尝试{ if(！这个$ refs . water wrap){ 0返回索引；}让childs=这个参考文献。水包装。子级| |[]；让minx=childs[0].儿童[0]。偏右；用于(设I=1；I childs . lenti){ let元素=childs[I]；让h=element.children[0].偏右；if(h minx){ minx=h；索引=我；} } } catch(e){ console。warn(e)；收益指数；}返回索引；} } }/脚本样式lang=“SCS”范围。vue-water-easy {宽度： 100%；display : flex justice-content :空格；div。colsw { flex : 1；盒子尺寸：边框盒子；相对位置：最后一个孩子{右边距： 0！重要；} :第一个孩子{左边距-: 0！重要；} ul { list-style :无；宽度： 100%;李{宽度： 100%；} } } }/style使用

vuewaterasy : img sarr=' img sarr ' srckey=' URL '模板v-slot=' { item } ' img 3360 src=' http : item。URL ' alt=' '/template/vuewateraysgarr:它是一个图片数据数组，其中包含[{src3333

Srckey :是图片路径的属性，默认值为src

MaxCols:有多少列默认为3

间隙：默认情况下，每列的间距为10px

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。