纯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>
相关推荐
程序猿阿伟2 小时前
《Chrome标签组搭建多任务高效浏览指南》
前端·chrome
2601_958352902 小时前
双麦 DSP 音频模块实战:一文梳理 A-68 在全行业场景的声学解决方案与落地要点
前端·嵌入式硬件·音视频·语音识别·降噪消回音·音频处理模块
智码看视界3 小时前
老梁聊全栈:JavaScript 原型链深入探索对象继承的奥秘
前端·javascript·ecmascript
智码看视界3 小时前
老梁聊全栈系列 JavaScript语言本质:从原型链到异步编程的深度解析
开发语言·javascript·全栈·javascript核心
布朗克1683 小时前
39 Spring Boot Web实战
前端·spring boot·后端·实战
纽格立科技3 小时前
DRM 发射端链路图(上)
前端·人工智能·车载系统·信息与通信·传媒
云水一下3 小时前
Vue.js从零到精通系列(七):高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
前端·vue.js·typescript
qq4356947013 小时前
Vue05
前端·vue.js
qq_422152573 小时前
PDF 解密工具怎么选?2026 年文档密码移除方案与注意事项
java·前端·pdf
YHHLAI3 小时前
前端工程化调用 AI 多模态生图模型:Qwen Image Demo 实战
前端·人工智能