本文主要是介绍这么简单的瀑布流,你确定不看,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
背景
在工作中我们或多或少都遇到过需要用到瀑布流的列表或者需求,那么我们怎么实现瀑布流呢?今天我就给大家带来一个简单的实现方法。给大家做打个样。
技术
- vue3
- vite
源码地址
瀑布流地址
后面有时间会将此源码封装成公共组件库–>供大家下载使用–如果大家感兴趣的话可以关注一下
HTML
<template><div><button @click="addCard">增加</button><div class="card"><div class="card-list"v-waterfallv-for="(item,index) in list" :key="index":style="{backgroundColor:item.color,height:item.height}"><p class="text"> {{ index }} </p></div></div></div>
</template>
css
这儿注意–>因为在js中我使用的是transform,所以需要使用到定位
这篇关于这么简单的瀑布流,你确定不看的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!