vue 响应式 瀑布流

Vue响应式瀑布流是指在Vue.js中实现一个响应式的瀑布流布局。瀑布流布局是一种常见的网页布局方式，主要用于展示图片等元素，每一列的高度不同，元素会根据空闲列的高度来依次排列。

在Vue中实现响应式的瀑布流布局，可以借助Vue的指令和计算属性来实现。下面是一个简单的示例：

首先，在Vue组件中定义一个data属性来存储瀑布流的数据，比如一个图片列表：

data() {
  return {
    images: [
      { src: 'image1.jpg', height: 200 },
      { src: 'image2.jpg', height: 300 },
      { src: 'image3.jpg', height: 250 },
      // 其他图片数据...
    ],
    cols: 3, // 瀑布流的列数
    colHeights: [] // 每列的高度
  }
}

然后，在模板中使用v-for指令遍历images数组，动态生成图片元素，并使用计算属性来计算每列的高度：

<div class="waterfall">
  <div class="col" v-for="(image, index) in images" :key="index" :style="{ height: getColumnHeight(index) + 'px' }">
    <img :src="image.src" alt="">
  </div>
</div>

接下来，在Vue组件的计算属性中定义getColumnHeight方法，用来计算每列的高度：

computed: {
  getColumnHeight() {
    return (index) => {
      if (!this.colHeights[index]) {
        this.colHeights[index] = 0;
      }
      return this.colHeights[index];
    };
  }
}

最后，在mounted钩子中监听窗口变化，以便在窗口大小改变时重新计算列高度：

mounted() {
  window.addEventListener('resize', this.updateColumnHeights);
},
methods: {
  updateColumnHeights() {
    // 更新每列的高度
    // ...
  }
}

以上是一个简单的Vue响应式瀑布流布局的示例，你可以根据实际需求进行调整和扩展。希望对你有帮助！