通過vue寫一個瀑布流插件代碼實例

更新時間：2019年09月07日 10:28:39 作者：muamaker

這篇文章主要介紹了通過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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: