当前位置：网站首页 > 技术文章 > 正文

Grid 移动端双列瀑布流（移动端瀑布流布局）

zhezhongyun 2025-06-24 18:13 69 浏览

预览图：

原理

合理使用 Grid 的属性：

display:设置为grid指明当前容器为Grid布局
grid-template-columns: 定义每一列的列宽（百分比或绝对单位）
grid-template-rows: 定义每一行的行高（百分比或绝对单位）
grid-auto-rows：用来设置多余网格的行高【瀑布流行数不确定时】
column-gap：用于设置列间距
grid-row-start：上边框所在的水平网格线
grid-row-end：下边框所在的水平网格线
grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线

做一个简单的网格布局，其实不是那么复杂！

预览图：

具体的源码可以访问另一篇文章：Grid 实现九宫格布局 - 今日头条

那么什么是网格线呢?

划分网格的线，称为网格线。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

比如一个 3 x 3 的网格，共有4根水平网格线和4根垂直网格线（如上面的九宫格布局）。

如何操控这些网格线呢？

这时候就要说上面那四个属性了，它们可以接收：

auto：表示自动放置
自定义名称：可以给予网格线一个名称，并在此处引用
网格线索引: 代表第几条网格线(从1开始)
span + 数字: 表示上下边框或左右边框跨越多少网格

简单用伪 CSS 代码举例：

.item{
    height:100%;
}
.item:first-child{
    grid-row-start:1;
    grid-row-end:span 2;
}

有了这些基础，就能看下面完整代码了！

完整代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        :root {
            --container-w: 295px;
            --container-h: 500px;
        }

        .container {
            overflow-y: auto;
            position: absolute;
            top: 49%;
            left: 50%;
            display: grid;
            width: var(--container-w);
            height: var(--container-h);
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 10px;
            column-gap: 4px;
            padding: 1px 2px;
            box-sizing: border-box;
            transform: translate(-50%, -50%);
            background-color: #252525;
            border-radius: 1px;
        }

        .container::-webkit-scrollbar {
            width: 1px;
        }

        .container .item {
            overflow: hidden;
            height: 208px;
            border-radius: 1px;
            grid-row-start: auto;
        }

        .container .item img,
        .container .item .title {
            color: #fff;
            width: 100%;
        }

        .container .item .title {
            overflow: hidden;
            cursor: default;
            padding: 3px 8px;
            font-size: 14px;
            /* text-indent: 2em; */
            box-sizing: border-box;

            /* 多行显示 */
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <svg t="1692973028452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4924" width="700" height="650">
        <path
            d="M657.4 6.6H369.6c-69.7 0-130 32.1-130 106.4v784.5c0 69.7 55.8 123.7 130 123.7h287.9c74.3 0 129.9-60.4 129.9-134.6V106.7c0-69.6-55.7-100.1-130-100.1z m-135 16.5c4.8 0 8.8 4 8.8 8.8 0 4.8-4 8.8-8.8 8.8-4.9 0-8.8-4-8.8-8.8 0-4.9 4-8.8 8.8-8.8z m-44.8 47.2c0-5.1 4.2-9.3 9.3-9.3h75.7c5.1 0 9.3 4.2 9.3 9.3v0.7c0 5.1-4.2 9.3-9.3 9.3h-75.7c-5.1 0-9.3-4.2-9.3-9.3v-0.7zM449 62.1c4.9 0 8.8 4 8.8 8.8 0 4.9-3.9 8.8-8.8 8.8s-8.8-4-8.8-8.8c0-4.9 4-8.8 8.8-8.8z m64.6 926.1c-24.1 0-43.6-19.6-43.6-43.6 0-24.1 19.6-43.6 43.6-43.6 24.1 0 43.6 19.6 43.6 43.6 0.1 23.9-19.5 43.6-43.6 43.6z m229-129c0 7-5.8 12.8-12.9 12.8H297.5c-7.1 0-12.9-5.8-12.9-12.9v-734c0-7.1 5.8-12.9 12.9-12.9h432.2c7.1 0 12.9 5.8 12.9 12.9v734.1z"
            fill="#727171" p-id="4925"></path>
    </svg>
    <div class="container"></div>

    <script>
        const data = [
            {
                title: "MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。",
                img: "https://s1.ax1x.com/2023/07/12/pCfbg0A.png"
            },
            {
                title: "Spring 框架是一个开源 Java 平台，它为非常容易和非常快速地开发健壮的 Java 应用程序提供全面的基础架构支持。 Spring 框架最初由 Rod Johnson 编写，于 2003 年 6 月在 Apache 2.0 许可下首次发布。本教程基于 2015 年 3 月发布的 Spring Framework 4.1.6 版本编写。",
                img: "https://www.w3schools.cn/spring/images/spring.jpg"
            },
            {
                title: "JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。JavaScript 非常容易学。本教程将教你学习从初级到高级 JavaScript 知识。",
                img: "https://s1.ax1x.com/2023/06/20/pC8UDRf.png"
            },
            {
                title: "Go 语言被设计成一门应用于搭载 Web 服务器，存储集群或类似用途的巨型中央服务器的系统编程语言。对于高性能分布式系统领域而言，Go 语言无疑比大多数其它语言有着更高的开发效率。它提供了海量并行的支持，这对于游戏服务端的开发而言是再好不过了。",
                img: "https://s1.ax1x.com/2023/06/22/pCJ3oEq.png"
            },
            {
                title: "小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。",
                img: "https://s1.ax1x.com/2023/06/29/pC0A6k6.png"
            },
            {
                title: "简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。",
                img: "https://s1.ax1x.com/2023/06/20/pC83wcj.png"
            },
            {
                title: "NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。",
                img: "https://s1.ax1x.com/2023/06/20/pC8GJfS.png"
            },
            {
                title: "React是一个自由及开放源代码的前端JavaScript工具库， 用于基于UI组件构建用户界面。 它由Meta和由个人开发者和公司组成的社群维护。 React可用作开发具有Next.js等框架的单页、手机或服务器渲染应用程序的基础。然而，React只专注状态管理和将状态渲染DOM，因此创建React应用程序通常需要使用额外的工具库来进行路由实现，以及某些客户端功能。",
                img: "https://s1.ax1x.com/2023/06/20/pC8kAgS.png"
            },
            {
                title: "Oracle Java 是广受欢迎的编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今，Java 仍是企业和开发人员的首选开发平台，全球有数百万开发人员运行超过 60 亿台 Java 虚拟机。",
                img: "https://tse4-mm.cn.bing.net/th/id/OIP-C.mhadmzLMh4cZzx_r39FfiQHaD2?w=302&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
            },
            {
                title: "RabbitMQ是实现了高级消息队列协议（AMQP）的开源消息代理软件（亦称面向消息的中间件）。RabbitMQ服务器是用Erlang语言编写的，而集群和故障转移是构建在开放电信平台框架上的。所有主要的编程语言均有与代理接口通讯的客户端库。",
                img: "https://tse2-mm.cn.bing.net/th/id/OIP-C.A_E5Ucxpc_-_N241EmD9_wHaEK?w=262&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
            },
            {
                title: "Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。传统的spring项目中需要用到大量的xml配置，以及复杂的bean依赖关系，随着spring3.0的发布spring团队开始大量使用约定大于配置的思想来简化配置。",
                img: "https://tse1-mm.cn.bing.net/th/id/OIP-C.ght-TirNgv05z-Ene0JlZgHaEK?w=282&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
            },
        ]

        data.push(...data)
    </script>

    <script>
        const container = document.querySelector(".container")
        const item_bottom_box_text_h = 100

        for (let i = 0; i < data.length; i++) {
            let item = document.createElement("div")
            item.className = "item"

            let img = document.createElement("img")
            img.src = data[i].img

            let titleP = document.createElement("p")
            titleP.className = "title"
            titleP.innerText = data[i].title
            titleP.title = data[i].title

            img.onload = () => {
                let image = new Image()
                image.src = data[i].img
                let w = image.width
                let h = image.height
                // 求出真实渲染在页面上图片高度
                let img_h = Math.floor(h * img.width / w)
                // 求出 item 盒子高度 = img_h + 文字盒子高度[100px]
                let item_h = img_h + item_bottom_box_text_h
                item.style.gridRowEnd = `span ${Math.floor(item_h / 10)}`
            }

            item.appendChild(img)
            item.appendChild(titleP)
            container.appendChild(item)
        }
    </script>
</body>
</html>

grid-columns 属性

上一篇：DevExpress导出GridControl控件数据
下一篇：用 CSS Grid 布局制作一个响应式柱状图

Grid 移动端双列瀑布流（移动端瀑布流布局）

原理

完整代码

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

Python每日一库之Beautiful Soup（python mtime）

怎么用三种代码写「九九乘法表」（如何编写九九乘法表的程序）

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

旧手机新玩法，MacroDeck进阶指南

业余无线电UV段几种常见天线（uv段最强天线）