vue3 实现瀑布流

--新芽-

已于 2023-06-09 17:11:22 修改

阅读量387

点赞数

文章标签：开发语言 vue.js javascript typescript

于 2023-06-09 17:10:38 首次发布

本文链接：https://blog.youkuaiyun.com/hhhhhhhhhtr/article/details/131131466

版权

本文详细介绍了如何使用Vue3来实现一个瀑布流布局。通过在父组件和子组件之间的交互，实现了动态加载和排列元素的效果，适合于展示多图或卡片式的内容。内容涵盖Vue3的基础知识以及瀑布流布局的原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终实现
在这里插入图片描述

父组件

<template>
<Com :list="list" />
</template>
<script setup lang="ts">
const list = [
    {
   
        height: 300,
        background: 'red'
    },
    {
   
        height: 400,
        background: 'pink'
    },
    {
   
        height: 500,
        background: 'blue'
    },
    {
   
        height: 200,
        background: 'bisque'
    },
    {
   
        height: 300,
        background: 'rebeccapurple'
    },
    {
   
        height: 100,
        background: 'blue'
    },
    {
   
        height: 200,
        background: 'bisque'
    },
    {
   
        height: 300,
        background: 'rebeccapurple'
    },
    {
   
        height: 300,
        background: 'red'
    },
    {
   
        height: 400,
        background: 'pink'
    },
    {
   
        height: 500,
        background: 'blue'
    },
    {
   
        height: 20,
        background: 'bisque'
    },

最低0.47元/天解锁文章