这么简单的瀑布流，你确定不看

最新推荐文章于 2024-07-11 15:29:37 发布

雾恋

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量413

点赞数 5

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_50307964/article/details/136441338

版权

以上只是一个简单的模板，大家可以在此基础上优化优化以便达到自己需要的要求。今天的分享到这里就结束了哦！源码库，后续会更新插件库。

摘要由CSDN通过智能技术生成

背景

在工作中我们或多或少都遇到过需要用到瀑布流的列表或者需求，那么我们怎么实现瀑布流呢？今天我就给大家带来一个简单的实现方法。给大家做打个样。
在这里插入图片描述

技术

vue3
vite

源码地址

瀑布流地址

后面有时间会将此源码封装成公共组件库–>供大家下载使用–如果大家感兴趣的话可以关注一下

HTML

<template>
  <div>
    <button @click="addCard">增加</button>
    <div class="card">
      <div class="card-list"
      v-waterfall
      v-for="(item,index) in list" :key="index"
      :style="{backgroundColor:item.color,height:item.height}"
      >
        <p class="text"> {
  { index }} </p>
      </div>
    </div>

  </div>
</template>