纯CSS瀑布流

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>
  /* 瀑布流容器 */
  .waterfall-container {
    column-count: 2; /* 列数 */
    column-gap: 20px; /* 列间距 */
  }

  /* 每个瀑布流项 */
  .waterfall-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px; /* 项之间的垂直间距 */
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
</head>
<body>
  <div class="waterfall-container">
    <div class="waterfall-item">
        项目 1项目 1项目 1项目 1项目 1
    </div>
    <div class="waterfall-item">
        项目 2项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
    </div>
    <div class="waterfall-item">
        项目 3项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
    </div>
    <div class="waterfall-item">
        项目 4项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
    </div>
    <div class="waterfall-item">
        项目 5项目 1项目 1项目 1项目 1项目 1项目 1
    </div>
    <div class="waterfall-item">
        项目 6项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
    </div>
    <!-- 添加更多项目 -->
  </div>
</body>
</html>
相关推荐
向下的大树10 小时前
npm 最新镜像,命令导致下载错误
前端·npm·node.js
宁雨桥10 小时前
Service Worker:前端离线化与性能优化的核心技术
前端·性能优化
IT_陈寒10 小时前
SpringBoot实战:这5个隐藏技巧让我开发效率提升200%,90%的人都不知道!
前端·人工智能·后端
ObjectX前端实验室10 小时前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
excel11 小时前
Vue2 与 Vue3 生命周期详解与对比
前端
一只猪皮怪512 小时前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice12 小时前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸12 小时前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
李鸿耀15 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者20 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript