Vue3+TypeScript实现瀑布流布局

<template>
  <div class="waterfall-container">
    <div
      v-for="(item, index) in itemList"
      :key="index"
      class="waterfall-item"
      :style="{ width: itemWidth + 'px' }"
    >
      <!-- 这里放置内容，可以是图片或其他元素 -->
      <img :src="item.src" alt="Waterfall Item" />
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, Ref } from 'vue';
 
interface WaterfallItem {
  src: string;
}
 
export default defineComponent({
  name: 'WaterfallLayout',
 
  setup() {
    const itemList: Ref<WaterfallItem[]> = ref([]);
    const itemWidth = ref(200); // 设置水平布局中的单个元素宽度
 
    // 模拟获取数据源
    const getData = () => {
      const data: WaterfallItem[] = []; // 模拟数据源
      for (let i = 0; i < 20; i++) {
        data.push({
          src: `https://picsum.photos/seed/${i}/${itemWidth.value}/${itemWidth.value}`,
        });
      }
      itemList.value = data;
    };
 
    onMounted(() => {
      getData();
    });
 
    return { itemList, itemWidth };
  },
});
</script>
 
<style scoped>
.waterfall-container {
  position: relative;
  width: 100%;
  margin-top: 10px;
}
.waterfall-item {
  float: left;
  margin-bottom: 10px;
}
img {
  display: block;
  width: 100%;
}
</style>

这段代码展示了如何在Vue 3和TypeScript中创建一个简单的瀑布流布局。waterfall-container是容器，其中的waterfall-item通过float属性实现水平排列。每个项目通过img标签展示图片，图片通过src动态绑定进入。数据通过模拟函数getData生成并通过itemList数组进行管理。