vue3瀑布流布局（使用 Vue 3 框架的单文件组件格式（Single-File Component）编写的）

锅盖哒2023-10-11 11:17

使用 Vue 3 框架的单文件组件格式（Single-File Component）编写的，这是Vue.js推荐的代码组织方式。单文件组件通常包括三个主要部分：

<template>：在这个部分中定义了组件的模板，也就是用户界面的结构和布局。这里使用了Vue的模板语法，包括v-for、{``{ }}等指令和插值表达式。
<script>：这个部分包含了组件的JavaScript逻辑。在Vue 3中，使用了setup()函数来设置组件的响应式数据和方法。
<style>：这个部分定义了组件的样式，包括CSS规则和样式定义。

废话不多说直接上代码

复制代码

<template>
  <!-- 瀑布流容器 -->
  <div class="waterfall-container">
    <!-- 使用v-for循环遍历itemList中的项目 -->
    <div
      v-for="(item, index) in itemList"
      :key="index"
      class="waterfall-item"
    >
      <!-- 显示项目的图片 -->
      <img :src="item.imageSrc" alt="">
      <!-- 显示项目的标题 -->
      <h2>{{ item.title }}</h2>
      <!-- 显示项目的内容 -->
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用ref函数创建响应式数据，存储项目列表
    const itemList = ref([
      {
        imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
        title: '我是标题1',
        content: '我是内容1',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
        title: '我是标题2',
        content: '我是内容2',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
        title: '我是标题3',
        content: '我是内容3',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
        title: '我是标题4',
        content: '我是内容4',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
        title: '我是标题5',
        content: '我是内容5',
      },
    ]);

    return {
      itemList, // 在setup函数中返回响应式数据
    };
  },
};
</script>

<style>
/* 设置瀑布流容器的样式 */
.waterfall-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 列宽自适应，最小300px，平均分配宽度 */
  gap: 20px; /* 项目之间的间隔 */
}

/* 设置项目样式，如背景色和阴影 */
.waterfall-item {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

/* 设置图片样式，使其适应容器宽度 */
img {
  max-width: 100%;
  height: auto;
}
</style>