百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Grid 移动端双列瀑布流(移动端瀑布流布局)

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

预览图:

原理

合理使用 Grid 的属性:

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

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

预览图:

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

那么什么是网格线呢?

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

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

如何操控这些网格线呢?

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

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

简单用伪 CSS 代码举例:

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

有了这些基础,就能看下面完整代码了!

完整代码

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

相关推荐

怎样设置EditText内部文字被锁定不可删除和修改

在做项目的时候,我曾经遇到过这样的要求,就是跟百度贴吧客户端上的一样,在回复帖子的时候,在EditText中显示回复人的名字,而且这个名字不可以修改和删除,说白了就是不可操作,只能在后面输入内容。在E...

iOS的布局体系-流式布局MyFlowLayout

iOS布局体系的概览在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父布局视图某个位置的框架布局(M...

浏览器滚动条hover时变粗、改变颜色

今天应UED的要求对项目的滚动条进行美化,原生的滚动条虽然很实用,但确实不美观。用了一些css美化后::-webkit-scrollbar{height:9px;width:9...

QML控件类型:ComboBox、Control(qml buttongroup)

Control一、描述Control是所有控件通用功能的抽象基类型。它从窗口系统接收输入事件,并在屏幕上绘制自身。二、控件布局控件的implicitWidth和implicitHeight通...

学习CSS布局:简单表格布局代码示例

性能优化-学习CSS布局:简单表格布局代码示例CSS是现代Web设计和开发的必备技能之一。而表格布局是Web页面中常用的布局之一,用于展示数据和信息。在这篇文章中,我们将介绍如何使用CSS创建一个简单...

UE5之UMG基础第1篇:统一网格面板(ue5 新功能)

目标:记录和学习UE5的UMG方法制作UI,使用UniformGridPanel制作效果如下:步骤1.增加前言:UniformGridPanel统一网格面板,就是所有子元素大小和间隔等统一,这种效果...

JS的 DOM 尺寸与位置属性(js设置dom属性)

#头条深一度-深度阅读计划#在JavaScript开发中,操作DOM元素的尺寸和位置是常见的任务,尤其是在实现动画、布局调整或响应式设计时。本文将全面解析JavaScript中与DOM...

SpriteJS:图形库造轮子的那些事儿

从2017年到2020年,我花了大约4年的时间,从零到一,实现了一个可切换WebGL和Canvas2D渲染的,跨平台支持浏览器、SSR、小程序,基于DOM结构和支持响应式的,高...

理解CSS中的百分比单位:相对尺寸的核心规则

在CSS中,百分比(`%`)是一种灵活且强大的相对单位,但其具体行为常让开发者感到困惑。本文将深入解析百分比单位的计算规则,帮助你彻底掌握其背后的逻辑。一、百分比的核心:参考系(包含块)百分比的值始...

36个工作中常用的JavaScript函数片段「值得收藏」

作者:Eno_Yao转发链接:https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的...

如何使用css完成视差滚动效果?(css 视距)

视差滚动(ParallaxScrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层、内容层、悬浮层使用css形式实现视觉差滚动效果的方...

vant-List 列表(vant select)

引入importVuefrom'vue';import{List}from'vant';Vue.use(List);基础用法List组件通过lo...

Vue3问题:如何使用WangEditor富文本?能自定义才是真的会用!

笔者|大澈大家好,我是大澈!今天的问题,来自于上周末问题留言的朋友嘻嘻哈哈。欢迎大家在周末的问题留言推文中,积极进行问题留言,把这周工作日遇到的问题,分享给大家瞧瞧,或者直接进问答群,一起交流唠...

微信小程序开发极简入门(二):样式,页面,数据

前文:微信小程序开发极简入门(一)样式wxss:/**放在页面的wxss**/.scrollarea{flex:1;overflow-y:hidden;}.idx_view{...

AI+Code驱动的M站首页重构实践:从技术债务到智能化开发

本文分享了阿里巴巴找品M站首页重构项目中AI+Code提效的实践经验。面对M站技术栈陈旧、开发效率低下的挑战,我们通过楼层动态化架构重构和AI智能脚手架,实现了70%首页场景的标准化覆盖+30%的...