vue实现瀑布流效果

代码如下：

<template>

  <div

    class="v-waterfall-content"

    id="v-waterfall"

  >

    <div

      v-for="(img,index) in waterfallList"

      class="v-waterfall-item"

      :key="index"

      :style="{top:img.top+'px',left:img.left+'px',width:waterfallImgWidth+'px',height:img.height}"

    >

      <img

        :src="img.src"

        alt=""

      >

    </div>

  </div>

</template>

 

<script>

export default {

  name: "v-waterfall",

  data() {

    return {

      waterfallList: [],

      imgArr: [

        require("../assets/01.jpg"),

        require("../assets/02.jpg"),

        require("../assets/03.jpeg"),

        require("../assets/04.jpg"),

        require("../assets/05.jpg"),

        require("../assets/06.png"),

        require("../assets/07.jpg"),

        require("../assets/08.jpg"),

        require("../assets/09.jpg"),

        require("../assets/10.jpg"),

        require("../assets/11.jpg"),

        require("../assets/12.jpg"),

        require("../assets/13.jpg"),

        require("../assets/14.jpg"),

        require("../assets/15.jpg"),

      ],

      waterfallImgWidth: 220,

      waterfallImgCol: 5,

      waterfallImgRight: 10,

      waterfallImgBottom: 10,

      waterfallDeviationHeight: [],

      imgList: []

    }

  },

  created() {

    for (let i = 0; i < 100; i++) {

      this.imgList.push(this.imgArr[Math.round(Math.random() * 15)]);

    }

  },

  mounted() {

    this.calculationWidth();

  },

  methods: {

 

    //计算每个图片的宽度或者是列数

    calculationWidth() {

      let domWidth = document.getElementById("v-waterfall").offsetWidth;

      if (!this.waterfallImgWidth && this.waterfallImgCol) {

        this.waterfallImgWidth = (domWidth - this.waterfallImgRight * this.waterfallImgCol) / this.waterfallImgCol;

      } else if (this.waterfallImgWidth && !this.waterfallImgCol) {

        this.waterfallImgCol = Math.floor(domWidth / (this.waterfallImgWidth + this.waterfallImgRight))

      }

      //初始化偏移高度数组

      this.waterfallDeviationHeight = new Array(this.waterfallImgCol);

      for (let i = 0; i < this.waterfallDeviationHeight.length; i++) {

        this.waterfallDeviationHeight[i] = 0;

      }

      this.imgPreloading()

    },

    //图片预加载

    imgPreloading() {

      for (let i = 0; i < this.imgList.length; i++) {

        let aImg = new Image();

        aImg.src = this.imgList[i];

        aImg.onload = aImg.onerror = () => {

          let imgData = {};

          imgData.height = this.waterfallImgWidth / aImg.width * aImg.height;

          imgData.src = this.imgList[i];

          this.waterfallList.push(imgData);

          this.rankImg(imgData);

        }

      }

    },

    //瀑布流布局

    rankImg(imgData) {

      let { waterfallImgWidth, waterfallImgRight, waterfallImgBottom, waterfallDeviationHeight } = this;

      //for (let i = 0;i < this.waterfallList.length;i++){

      let minIndex = this.filterMin();

      imgData.top = waterfallDeviationHeight[minIndex];

      imgData.left = minIndex * (waterfallImgRight + waterfallImgWidth);

      waterfallDeviationHeight[minIndex] += imgData.height + waterfallImgBottom;

      //}

      console.log(imgData);

    },

 

    filterMin() {

      const min = Math.min.apply(null, this.waterfallDeviationHeight);

      return this.waterfallDeviationHeight.indexOf(min);

    }

  }

}

</script>

 

<style scoped>

.v-waterfall-content {

  width: 100%;

  height: 100%;

  position: relative;

}

.v-waterfall-item {

  float: left;

  position: absolute;

}

.v-waterfall-item img {

  width: 100%;

  height: 100%;

}

</style>