当前位置: 首页 > Web前端 > vue.js

vue手写图片瀑布组件(附源码)

时间:2023-03-31 21:01:44 vue.js

前言瀑布,又称瀑布布局。是一种比较流行的网站页面布局,其视觉表现是不均匀的多栏布局。随着页面滚动条的向下滚动,这个布局会不断加载数据块,并追加到当前尾部。最终效果如下Scrollloading:自适应宽度:原理分析,瀑布中的每个图片元素,宽度相同,高度不同;从第二行开始,每个元素实际上都插入到具有最小高度的列中。emmmmm,就这么简单。。。布局比较简单。容器设置'position:relative;'对于相对定位,图像元素设置'position:absolute;'用于绝对定位。

.waterfall_box{位置:相对;保证金:0自动;.waterfall_item{浮动:左;位置:绝对;img{宽度:100%;高度:自动;}}}实现直接上面的代码比较容易理解Vue模板结构"waterfall_col_num>1">
定义变量@Prop({required:true,type:Array})readonlyimg_list!:[];@Prop({required:true,type:Number})#imagewidthreadonlyimg_width!:number;@Prop({required:true,type:Number})#imagebottommarginreadonlyimg_margin_bottom!:number;img_margin_right!:number;#imagerightmargin/*containerwidthandheight*/waterfall_box_width=0;waterfall_box_height=0;waterfall_col_num=0;#columnnumberwaterfall_col_height_list:Array=[];#每列的最大高度waterfall_list=[];#瀑布流使用的数据是接下来的重点,也需要直接在代码上初始化一些必要的参数#计算当前视图宽度最大可以放置的列数,向下取整this.waterfall_col_num=Math.floor(this.waterfall_box_width/this.img_width)||1;#根据列数存储一个临时数组来存储当前每列的最小高度this.waterfall_col_height_list=newArray(this.waterfall_col_num).fill(0);#计算每行图片之间的差距this.img_margin_right=(this.waterfall_box_width-this.waterfall_col_num*this.img_width)/(this.waterfall_col_num-1);#只有一栏,显然不需要瀑布流布局,直接正常布局if(this.waterfall_col_num<=1)return;this.layoutWatreFall();瀑布流布局计算#使用临时存储,所有计算完成后更新Vue数据consttemp_waterfall_list:any=[];#遍历每张图片数据,动态添加一些其他参数每轮遍历将数据添加到最小高度列并设置left和topthis.img_list.forEach((img_item:any)=>{constminIndex=this.finMinHeightIndex();constimg_obj={...img_item,url:img_item.url,width:this.img_width,height:Math.floor((this.img_width/img_item.width)*img_item.height),#图片缩放top:this.waterfall_col_height_list[minIndex],left:minIndex*(this.img_margin_right+this.img_width),};temp_waterfall_list.push(img_obj);this.waterfall_col_height_list[minIndex]+=img_obj.height+this.img_margin_bottom;#每次放置元素时,每列的个数都会实时更新时间最小高度});this.waterfall_list=temp_waterfall_list;this.waterfall_box_height=Math.max.call(null,...this.waterfall_col_height_list);#更新父容器的高度辅助函数#求数组最小下标finMinHeightIndex(){returnthis.waterfall_col_height_list.indexOf(Math.min.call(null,...this.waterfall_col_height_list));}使用源代码,传递图片宽度和底部边距。#scopeslot来源/waterFall.vue)END