vue 瀑布流布局 复制即用

在Vue中实现瀑布流布局可以使用第三方库，例如vue-waterfall-easy，也可以手动实现。以下是一个简单的手动实现瀑布流布局的例子：

<template>
  <div class="waterfall">
    <div class="waterfall-item" v-for="(item, index) in items" :key="index" :style="{width: itemWidth + 'px'}">
      <!-- 这里放置你的内容 -->
      <img :src="item.src" alt="">
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [], // 用于存储瀑布流中的数据
      columns: [], // 用于存储每列的高度
      itemWidth: 200, // 设定每个瀑布流项的宽度
    };
  },
  mounted() {
    this.fetchData(); // 假设这个方法用来获取数据
  },
  methods: {
    fetchData() {
      // 模拟获取数据的过程
      this.items = [
        // ... 填充数据
      ];
    }
  }
};
</script>
 
<style>
.waterfall {
  position: relative;
  margin-left: -10px; /* 为了左对齐，每列之间的间隔 */
}
.waterfall-item {
  padding: 10px;
  float: left;
  margin-left: 10px;
}
</style>

在这个例子中，fetchData方法用来模拟从服务器获取数据，并将数据填充到items数组中。waterfall-item组件根据其内容自动调整高度，通过float: left实现多列布局，并通过margin-left和padding来创建列与列之间的间隔。

请注意，这只是一个简单的示例，实际应用中可能需要处理图片的异步加载、水平滚动加载更多等功能。