vue实现瀑布流

天使的同类

已于 2022-05-16 15:01:52 修改

阅读量425

点赞数

分类专栏： vue.js 文章标签： vue.js multi-column 瀑布流多栏布局

于 2022-05-16 15:01:14 首次发布

本文链接：https://blog.csdn.net/summer_jk/article/details/124799881

版权

本文介绍如何在Vue.js中实现瀑布流效果，通过创建多栏布局来展示内容，达到视觉上的瀑布式排列。

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

vue实现瀑布流

案例：

<template>
  <div class="page-main">
    <div class="card">
      <div
        class="card-item"
        v-for="(item, index) in cardList"
        :key="index"
        :style="[
          {
    background: item.color },
          {
    height: item.height },
          {
    lineHeight: item.height },
        ]"
      >
        <p class="text">{
   {
    index }}</p></