溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了通過vue寫一個瀑布流插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
效果如圖所示：
采用了預先加載圖片，再計算高度的辦法。。網絡差的情況下，可能有點卡
新建 vue-water-easy.vue 組件文件
<template>
<div class="vue-water-easy" ref="waterWrap">
<div v-for="(items,clos) in list" :key="clos" : class="colsW">
<ul>
<li v-for="(item,index) in items" :key="index" :>
<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" >
</template>
</vueWaterEasy>
imgsArr：為圖片數據的數組，內部包含對象 [ { src:"xxxx" } ]
srckey : 為圖片路徑的屬性，默認為 src
maxCols: 多少列 默認為 3
gap ： 每列的間距默認 10px
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
