Vue实现图片瀑布流

在线演示地址：点击前往原文查看

一，创建一个Waterfall组件

代码如下：

<template>
  <div class="waterfall">
    <!-- 循环渲染每一列 -->
    <div class="waterfall-column" v-for="(column, index) in columns" :key="index">
      <!-- 循环渲染每一项 -->
      <div class="waterfall-item" v-for="(item, i) in column" :key="i">
        <img
            width="100%"
            :src="item.src" :alt="item.alt"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
   
   
  name: 'Waterfall',
  props: {
   
   
    items: {
   
   
      type: Array,
      required: true
    },
    columnWidth: {
   
   
      type: Number,
      default: 200
    },
    gutter: {
   
   
      type: Number,
      default: 10
    }
  },
  data() {
   
   
    return {
   
   
      columns: [] // 存储每一列的数据
    }
  },
  watch: {
   
   
    items: {
   
   
      handler: function (newVal, oldVal) {
   
   
        this.initColumns() // 监听数据变化，重新计算每一列的数据
      },
      deep: