原理

合理使用 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;
}

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

完整代码





    
    
    瀑布流布局
    



    
    

    <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>

达永编程网

程序员技术分享与交流平台

Grid 移动端双列瀑布流

原理

完整代码