通过vue写一个瀑布流插件代码实例

这篇文章主要介绍了通过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="item.url" alt="">
</template>
</vueWaterEasy>

imgsArr：为图片数据的数组，内部包含对象 [ { src:"xxxx" } ]

srckey : 为图片路径的属性，默认为 src

maxCols: 多少列 默认为 3

gap ： 每列的间距默认 10px

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• Vue瀑布流插件的使用示例
• vue.js组件vue-waterfall-easy实现瀑布流效果
• web页面和微信小程序页面实现瀑布流效果
• Ionic3实现图片瀑布流布局
• 三种方式实现瀑布流布局