当前位置： 首页 > news >正文

纯 CSS 实现瀑布流布局的方法

news 2026/2/9 23:12:56

纯 CSS 实现瀑布流布局的方法

这种方式兼容性不是很好，全部支持需要些时间，但是目前是可以使用 css 写出来的

display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-template-rows: masonry;

全部的 css

.container {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;grid-template-rows: masonry;
}
img {display: block;width: 100%;
}

HTML 基础布局

<body><div class="container"><img src="images/0.jpg" alt="" /><img src="images/1.jpg" alt="" /><img src="images/2.jpg" alt="" /><img src="images/3.jpg" alt="" /><img src="images/4.jpg" alt="" /><img src="images/5.jpg" alt="" /><img src="images/6.jpg" alt="" /><img src="images/7.jpg" alt="" /><img src="images/8.jpg" alt="" /><img src="images/9.jpg" alt="" /><img src="images/10.jpg" alt="" /><img src="images/11.jpg" alt="" /><img src="images/12.jpg" alt="" /><img src="images/13.jpg" alt="" /><img src="images/14.jpg" alt="" /><img src="images/15.jpg" alt="" /><img src="images/16.jpg" alt="" /><img src="images/17.jpg" alt="" /><img src="images/18.jpg" alt="" /></div>
</body>

在这里插入图片描述

相关文章：

纯 CSS 实现瀑布流布局的方法

纯 CSS 实现瀑布流布局的方法 这种方式兼容性不是很好&#xff0c;全部支持需要些时间&#xff0c;但是目前是可以使用 css 写出来的 display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-template-rows: masonry;全部的 css .container {display:…...

编程日记 2023/10/15 2:49:17

输入法显示到语言栏_状态栏

设置–时间和语言–语言–最右侧"相关设置"中的"拼写、键入和键盘设置" 最下方的"高级键盘设置"–“使用桌面语言栏(如果可用)” 点击"语言栏选项" 接下来就是不同输入法的设置了 搜狗输入法:右键输入法选择"隐藏状态栏"–…...

编程日记 2023/10/15 2:48:16

[samba]同一个文件夹，分不同权限管理

#问题 有一个文件夹A能让用户1拥有写权限&#xff0c;而让用户2拥有只读权限&#xff0c;而用户3啥权限都没有&#xff0c;该如何设置samba呢&#xff1f; #解决办法 1.首先创建一个linux分组&#xff08;group)&#xff0c;命名为samba groupadd samba 2.创建一个samba默认…...

编程日记 2023/10/15 2:47:15

项目整合管理

项目整合管理概述 概述 项目的复杂性来源于组织的系统行为、人类行为以及组织或环境中的不确定性。在项目整合之前&#xff0c;项目经理需要考虑项目面临的内外部环境因素&#xff0c;检查项目的特征或属性。 作为项目的一种特征或属性&#xff0c;复杂性的含义&#xff1a; …...

编程日记 2023/10/15 2:46:14

基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现（一）

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 原先这个基于RuoYi-Flowable-Plus的这个不支持本地图片上传&#xff0c;只支持oss图片上传&#xff0c;所以…...

编程日记 2023/10/15 2:45:13

2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人…...

编程日记 2023/10/15 2:43:11

Puppeteer实现上下滚动、打开新Tab、用户数据保存（三）

Puppeteer实现上下滚动、打开新Tab、用户数据保存&#xff08;三&#xff09; Puppeteer实现上下滚动、打开新Tab、用户数据保存&#xff08;三&#xff09;一、实现上下滚动二、打开新Tab三、用户数据保存四、效果演示 一、实现上下滚动 在自动化测试中&#xff0c;我们需要能…...

编程日记 2023/10/15 2:41:09

ArduPilot开源飞控之AP_InertialNav

ArduPilot开源飞控之AP_InertialNav 1. 源由2. 调用关系3. 重要例程3.1 read_inertia3.2 update 4. 封装接口4.1 get_filter_status4.2 get_position_neu_cm4.3 get_position_xy_cm4.4 get_position_z_up_cm4.5 get_velocity_neu_cms4.6 get_velocity_xy_cms4.7 get_speed_xy_c…...

编程日记 2023/10/15 2:39:05

DataX工具部署与使用(PostgreSQL to Oracle)

目录&#xff1a; 一、准备环境&#xff08;1&#xff09;安装JDK&#xff08;2&#xff09;检查Python版本&#xff08;3&#xff09;DataX 解压及测试 二、同步测试1、配置清单2、操作示例&#xff08;1&#xff09;同步测试环境&#xff08;2&#xff09;准备测试表&#xf…...

编程日记 2023/10/15 2:38:04

【PyTorch2 之027】在 PyTorch 中的R-CNN、Fast R-CNN和 Faster R-CNN

一、说明 亮点&#xff1a;对象检测是计算机视觉中最重要的任务之一。在这篇文章中&#xff0c;我们将概述最有影响力的对象检测算法家族之一&#xff1a;R-CNN、Fast R-CNN 和 Faster R-CNN。我们将重点介绍它们中的每一个的主要新颖性和改进。 最后&#xff0c;我们将专注于 …...

编程日记 2023/10/15 2:37:03

C++学习——C++函数的编译、成员函数的调用、this指针详解

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 从博文的分析中可以看出&#xff0c;对象的内存中只保留了成员变量&#xff0c;除此之外没有任何其他信息&#xff0c;程序运行时不知道 stu 的类型为 Student&#xff0c;也不知道它…...

编程日记 2023/10/15 2:35:01

Pulsar Manager和dashboard部署和启用认证

Pulsar Manager部署和启用认证 官方地址: https://pulsar.apache.org/docs/zh-CN/next/administration-pulsar-manager/ Pulsar Manager 是一个网页式可视化管理与监测工具&#xff0c;支持多环境下的动态配置。可用于管理和监测租户、命名空间、topic、订阅、broker、集群等…...

编程日记 2023/10/15 2:33:59

K8S环境搭建

K8S环境搭建 前置条件 部署3台VM&#xff0c;一台作为master,两台作为slave需要保障vm之间网络是互通的 为vm安装docker # 安装/更新 yum-utils yum install -y yum-utils#添加阿里镜像稳定版仓库 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce…...

编程日记 2023/10/15 2:32:58

常用的软件项目管理工具一览

软件项目管理工具是帮助团队成功管理和完成软件开发项目的软件程序和应用程序。根据项目及其规模和复杂性&#xff0c;可以使用各种各样的这些工具来协助完成任务&#xff0c;从任务跟踪和调度&#xff0c;到项目报告&#xff0c;到版本控制和协作。 项目经理对软件项目的整体成…...

编程日记 2023/10/15 2:29:54

关于网络协议的若干问题(五)

1、DH 算法会因为传输随机数被破解吗&#xff1f; 答&#xff1a;DH 算法的交换材料要分公钥部分和私钥部分&#xff0c;公钥部分和其他非对称加密一样&#xff0c;都是可以传输的&#xff0c;所以对于安全性是没有影响的&#xff0c;而且传输材料远比传输原始的公钥更加安全。…...

编程日记 2023/10/15 2:27:52

TensorFlow入门(十七、神经元的拟合原理)

深度学习的概念源于人工神经网络的研究,神经网络是由多个神经元组成,。一个神经元由以下几个关键知识点组成: ①激活函数 ②损失函数 ③梯度下降 单个神经元的网络模型如图所示 用计算公式表达如下: z为输出的结果,x为输入,w为权重,b为偏置值。z…...

编程日记 2023/10/15 2:22:48

VSCODE配置C和C++

VSCode 运行 C/C 怎么配置&#xff1f; - 忆梦怀思的回答 - 知乎 https://www.zhihu.com/question/577315418/answer/3232537840 这个很好用&#xff0c;简单明白。 其中最后我的只配置了tasks.json就成功了。...

编程日记 2023/10/15 2:21:47

位于同一子网下的ip在子网掩码配置错误的情况下如何进行通信（wireshrak抓包分析）

前言 最近看书发现个问题&#xff0c;正好想学习下wireshark的使用&#xff0c;于是抓包做了下实验。 问题是这样的&#xff0c;假设有服务器A和服务器B&#xff0c;正确配置下两者处于同一子网&#xff1b;此时B的网络配置正确&#xff0c;而A在配置子网掩码时出了错&#xff…...

编程日记 2023/10/15 2:20:46

Dockerfile镜像实战

目录 1、构建SSH镜像 2、Systemctl镜像 3、nginx镜像 4、tomcat 镜像 5、mysql镜像 1、构建SSH镜像 cd /opt/sshd vim Dockerfile #第一行必须指明基于的基础镜像 FROM centos:7 #作者信息 MAINTAINER this is ssh image <hmj> #镜像的操作指令 RUN yum -y update R…...

编程日记 2023/10/15 2:19:45

企业如何选择安全又稳定的文件传输协议

企业无论是内部的数据共享&#xff0c;还是与外部的合作交流&#xff0c;都需要通过网络进行文件的传输和交换。然而&#xff0c;文件传输它涉及到多方面的因素&#xff0c;例如文件的大小、数量、类型、敏感性、传输距离、网络环境等。这些因素都会影响到文件传输的各个方面&a…...

编程日记 2023/10/15 2:17:43

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/2/6 0:50:24

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/2/6 22:13:44

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2026/1/30 4:18:53

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/12/8 14:33:23