CSS瀑布流实现

文章目录

• • 前言
  • • 前置知识
  • React 中实现
  • • 代码实现
  • Vue 中实现
  • • 代码实现

前言

瀑布流是一种CSS布局技术，它允许不同高度的元素在页面上以美观的方式排列，同时保持行与列间的间距一致。

前置知识

1. 使用 multi-column 实现多列布局

• column-count: 设置布局显示的列数。
• column-gap: 定义列与列之间的间距。
• column-rule: 设置列与列之间的边框样式。
• column-fill: 控制如何填充列，当内容高度不均时是否平衡各列的高度。

2. break-inside 属性

该属性用于控制块级元素的内容是否可以在其内部断开：

• auto: 默认值，允许内容在元素内部正常断开。
• avoid: 尝试避免在元素内部断开。如果内容过大而无法适应当前容器，则可能会导致溢出，而不是断开。
• avoid-page: 在打印或分页媒体中，避免在元素内部开始新的页面。

React 中实现

代码实现

import { useState } from "react";
import less from "./index.module.css";

const Falls = () => {
  const [data] = useState([
    "紫荆花飘扬紫荆花飘扬紫荆花飘扬紫荆花飘扬紫荆花飘扬紫荆花飘扬",
    "飞向 避风的海港避风的海港避风的海港避风的海港避风的海港避风的海港避风的海港",
    "摇曳 一湾水温柔",
    "全是 最爱坚守",
    "纯真 是你的微笑是你的微笑是你的微笑是你的微笑是你的微笑是你的微笑",
    "一眼到永远的抱抱",
    "爱像 亲恩般深长",
  ]);

  return (
    <div className={less.page}>
      <div className={less.card_container}>
        {data.map((item) => (
          <div key={item} className={less.card_item}>
            {/* 需要显示的内容 */}
            {item}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Falls;

.page {
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    padding: 10px 16px;
    box-sizing: border-box;
}

.card_container {
    column-count: 2; 
    column-gap: 15px; 
}

.card_item {
    break-inside: avoid; 
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #9999994e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

效果展示

Vue 中实现

代码实现

<template>
    <div class="page">
        <div class="card-container">
            <div class="card-item" v-for="item in data" :key="item">{{ item }}</div>
        </div>
    </div>
</template>

<script setup>

const data = ["紫荆花飘扬紫荆花飘扬紫荆花飘扬紫荆花飘扬紫荆花飘扬紫荆花飘扬", "飞向 避风的海港避风的海港避风的海港避风的海港避风的海港避风的海港避风的海港", "摇曳 一湾水温柔", "全是 最爱坚守", "纯真 是你的微笑是你的微笑是你的微笑是你的微笑是你的微笑是你的微笑", "一眼到永远的抱抱", "爱像 亲恩般深长"]

</script>

<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    padding: 10px 16px;
    box-sizing: border-box;

    .card-container {
        column-count: 2; // 定义2列
        column-gap: 15px; // 列与列的距离为20px

        .card-item {
            break-inside: avoid; // 指定元素不被截断
            margin-bottom: 15px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #9999994e;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    }
}
</style>

效果展示