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

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

news 2026/4/2 3:47:24

纯 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

OpenClaw学习助手：Gemma-3-12b-it生成错题本与定制复习计划

OpenClaw学习助手&#xff1a;Gemma-3-12b-it生成错题本与定制复习计划 1. 为什么需要AI学习助手&#xff1f; 作为一名经常需要处理大量学习资料的开发者&#xff0c;我一直在寻找能够提升学习效率的工具。传统的错题本整理方式需要手动抄写题目、标注知识点、寻找同类练习题…...

编程新知 2026/4/2 2:39:03

快速验证限流策略：用快马一键生成rate limit exceeded处理原型

快速验证限流策略&#xff1a;用快马一键生成rate limit exceeded处理原型 最近在开发一个需要调用第三方API的项目时&#xff0c;遇到了经典的"rate limit exceeded"问题。作为开发者我们都知道&#xff0c;API调用频率超限是系统设计中必须考虑的场景。传统从零搭…...

编程新知 2026/4/2 2:34:52

国内专业的铣打机厂家哪家专业

在制造业蓬勃发展的今天&#xff0c;铣打机作为轴类零件加工的关键设备&#xff0c;其性能和质量直接影响着生产效率和产品质量。面对市场上众多的铣打机厂家&#xff0c;该如何选择一家专业可靠的呢&#xff1f;今天就为大家介绍一家在行业内颇具口碑的企业——无锡通亚数控智…...

编程新知 2026/4/2 2:16:39

**跨平台开发新范式：Flutter + Dart实战构建高性能多端应用**在移动与桌面融

跨平台开发新范式&#xff1a;Flutter Dart 实战构建高性能多端应用 在移动与桌面融合加速的今天&#xff0c;跨平台开发早已不是“妥协”的代名词&#xff0c;而是开发者提升效率、降低维护成本的核心策略。本文将带你深入 Flutter Dart 的实战体系&#xff0c;通过真实项目…...

编程新知 2026/4/2 0:57:49

量化交易backtrader实践(二)_数据预处理篇(1)_格式转换与清洗

1. 数据预处理的重要性 在量化交易中&#xff0c;数据预处理就像做菜前的食材准备阶段。想象一下&#xff0c;如果你要做一道红烧肉&#xff0c;却直接拿刚从冰箱取出的冻肉下锅&#xff0c;结果可想而知。同样地&#xff0c;未经处理的原始金融数据直接喂给backtrader&#xf…...

编程新知 2026/4/2 0:35:07

探索偏心轮飞剪的 Codesys 程序奥秘：基于偏心轮加滑块机构

偏心轮 飞剪 电子凸轮 codesys程序源码 适用于偏心轮加滑块机构 在自动化控制领域&#xff0c;偏心轮飞剪系统凭借其独特的运动特性和高效的切割能力&#xff0c;在众多生产场景中发挥着关键作用。今天咱们就深入探讨基于偏心轮加滑块机构的偏心轮飞剪的 Codesys 程序源码&…...

编程新知 2026/4/2 0:24:55

爬虫自动化（DrissionPage）

目录 ?一.介绍: 下载DrissionPage,还是我们熟悉的pip&#xff1a; 环境准备&#xff1a; ?二.基本代码&#xff1a; 它对于的导包和类使用&#xff1a; 窗口的设置&#xff1a; 和获取的页面的滑动&#xff1a; 3.进一步认识DrissionPage&#xff1a; 浏览器可以多开…...

编程新知 2026/4/1 23:52:37

感知损失（Perceptual Loss）在图像风格迁移中的关键作用与实现

1. 为什么感知损失能让AI画出更像艺术家的画&#xff1f; 第一次用传统MSE损失做风格迁移时&#xff0c;我盯着生成的"梵高星空"直挠头——颜色位置都对&#xff0c;但怎么看都像小学生涂鸦。直到尝试了感知损失&#xff0c;画面突然有了笔触的韵律感。这背后的秘密…...

编程新知 2026/4/1 23:50:34

量子机器学习在医疗影像中的技术迷思与测试验证陷阱

当量子计算遭遇医学影像近年来&#xff0c;"量子赋能医疗影像"成为热门概念&#xff0c;宣称通过量子算法&#xff08;如QSVM、量子卷积&#xff09;可大幅提升病灶识别精度和图像重建效率。然而&#xff0c;作为软件测试从业者&#xff0c;我们需警惕技术炒作背后的…...

编程新知 2026/4/1 23:14:00

猫抓插件：浏览器资源嗅探的革命性解决方案

猫抓插件&#xff1a;浏览器资源嗅探的革命性解决方案 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否曾在浏览网页时&#xff0c;看到心仪的…...

编程新知 2026/4/1 22:51:39