vue 写一个瀑布流插件
2024-08-26 20:05:46
效果如图所示：
采用了预先加载图片，再计算高度的办法。。网络差的情况下，可能有点卡
新建 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="item.url" alt="">
</template>
</vueWaterEasy>
imgsArr：为图片数据的数组，内部包含对象 [ { src:"xxxx" } ]
srckey : 为图片路径的属性，默认为 src
maxCols: 多少列 默认为 3
gap ： 每列的间距默认 10px
最新文章
- Tween Animation----Rotate旋转动画
- AssetBundle loading failed because.....已解决
- STL_lower_bound&upper_bound用法
- 通过git在github上建立gh-pages分支并查看网页效果
- XMLHttpRequest
- js基础篇——call/apply、arguments、undefined/null
- Android布局尺寸思考
- SQLServer 分布式查询MySQL
- 【Hadoop环境搭建】Centos6.8搭建hadoop伪分布模式
- Python补充02 Python小技巧
- ping通网关 ping不能外网 DNS无法解析
- Codeforces Round #337 (Div. 2) C. Harmony Analysis 数学
- uva 11752 - The Super Powers
- Google AppEngine 创建的例子
- Visual Studio2010 安装msdn
- 修复被注入的sql server
- Vbox创建COM对象失败
- Django应用app创建及ORM
- Linux 学习笔记之超详细基础linux命令 Part 2
- 解决“错误为Lc.exe已退出，代码为-1”