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

在不使用js在情况下只用css实现瀑布流效果

news 文章来源：https://blog.csdn.net/qq_19917719/article/details/139658841 2024/11/2 14:26:47

在这里插入图片描述

使用到的是grid 布局，需要注意的是grid-template-rows: masonry; 目前只有Firefox 浏览器支持这个效果，而且还是一个实验性属性需要在设置里面开发实验性选项才行。

在这里插入图片描述

实例

<!DOCTYPE html>
<html>
<head><title>Document</title><style>#img {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;grid-template-rows: masonry;}#img img {width: 200px;}</style>
</head>
<body><div id="img"></div><script>const img =  document.getElementById('img')let ele = ''for (let i = 0; i < 14; i++) {ele += `<img src="./images/img (${i+1}).jpg" />`}img.innerHTML = ele</script>
</body>
</html>

相关文章：

在不使用js在情况下只用css实现瀑布流效果

使用到的是grid 布局&#xff0c;需要注意的是grid-template-rows: masonry; 目前只有Firefox 浏览器支持这个效果&#xff0c;而且还是一个实验性属性需要在设置里面开发实验性选项才行。 实例 <!DOCTYPE html> <html> <head><title>Document</ti…...

编程日记 2024/6/17 4:04:38

AMS（ActivityManagerService）源码解析2，Android应用是如何被启动的

一个Android应用是如何被启动的 前言总结1. 启动Application1.1 拉起一个新的进程1.2 启动Application1.3 AMS阶段1.4 创建Instrumentation和Application 2. 启动Activity2.1 回到AMS&#xff0c;启动第一个Activity 参考资料 前言 基于源码API 28&#xff0c;30以后的版本启动…...

编程日记 2024/6/17 4:03:37

数据库事务隔离级别

前几天项目上合作公司的系统出现了一次死锁&#xff0c;突然想到由于近几年开发设计的系统并发用户比较少&#xff0c;很久没有碰到过死锁了&#xff0c;因此对死锁的概念也比较生疏了&#xff0c;需要温习一下。 事务 先从最基本的概念开始&#xff0c;事务、及其ACID特性。…...

编程日记 2024/6/17 4:02:36

Pytest 记录日志输出到控制台和写入文件

目录 自定义日志记录器和内置的日志记录器 项目代码 项目目录树 自定义日志记录器 函数源代码 pytest中定义和覆盖日志记录信息 使用cli定义Logging 使用pytest.ini定义Logging 修改单个测试级别的日志 日志输出的重要性不言而喻&#xff0c;不仅可以观测执行过程&…...

编程日记 2024/6/17 4:01:35

LINUX网络FTP服务

一、FTP服务 FTP服务&#xff1a;file transfer protocol :文件传输协议。在网络上进行双向传输&#xff0c;也是一个应用程序。不同的操作系统有不同的FTP软件&#xff0c;但使用的协议是一样的。 FTP协议基于TCP协议&#xff0c;有两个端口&#xff0c;即20和21。 20端口&…...

编程日记 2024/6/17 4:00:34

10 C++11

10 C11 1、类型推导1.1 auto关键字1.2 auto类型推断本质 2、类型计算2.1 类型计算分类2.2 类型计算的四种规则2.3 返回值类型计算 3、列表初始化4、Lambda表达式4.1 前置知识4.2 Lambda表达式4.3 捕获表 5、右值引用5.1 概念5.2 左值引用和右值引用 6、移动语义 1、类型推导 1…...

编程日记 2024/6/17 3:59:33

java的封装

为什么要封装&#xff1f;在java的面向对象的思想中&#xff0c;封装是指将类的实现细节包装&#xff0c;隐藏起来的方法。封装可以防止本类的代码和数据被外部定义的代码随机访问。 如何进行封装&#xff1f; 在定义一个类时&#xff0c;将类中的属性私有化&#xff0c;即使…...

编程日记 2024/6/17 3:58:32

为什么选择海外服务器？

如何选择跨境电商服务器&#xff1a;详细指南 选择合适的服务器是跨境电商企业成功的基础。服务器的性能和稳定性直接影响着网站的访问速度、用户体验和安全性&#xff0c;进而影响着企业的销量和利润。那么&#xff0c;跨境电商企业该如何选择服务器呢&#xff1f; 1. 确定目…...

编程日记 2024/6/17 3:57:31

k8s+springcloud+nacos部署配置

1 k8s 部署nacos-2.1.2配置k8s-nacos-statefulSet.yaml文件 apiVersion: v1 kind: Service metadata:name: nacos-headlessnamespace: rz-dtlabels:app: nacosannotations:service.alpha.kubernetes.io/tolerate-unready-endpoints: "true" spec:# 3个端口打开&…...

编程日记 2024/6/17 3:55:28

梯度提升决策树（GBDT）

GBDT&#xff08;Gradient Boosting Decision Tree&#xff09;&#xff0c;全名叫梯度提升决策树&#xff0c;是一种迭代的决策树算法&#xff0c;又叫 MART&#xff08;Multiple Additive Regression Tree&#xff09;&#xff0c;它通过构造一组弱的学习器&#xff08;树&am…...

编程日记 2024/6/17 3:54:27

数据结构之B树的原理与业务场景

B树是一种自平衡的树形数据结构&#xff0c;它能够保持数据有序&#xff0c;并且可以高效地进行查找、顺序访问、插入和删除操作。B树的设计是为了优化磁盘I/O操作&#xff0c;因为它可以减少磁盘访问次数&#xff0c;这在数据库和文件系统中非常有用。 1. B树的原理 节点的出…...

编程日记 2024/6/17 3:53:25

【Android面试八股文】你能说一说线程池管理线程的原理吗？

面试官（Interviewer）: 欢迎参加面试，今天我们会讨论一些关于 Java 线程池管理的问题。你能给我解释一下 ThreadPoolExecutor 是如何管理线程的吗？ 候选人（Candidate）: 当然可以，ThreadPoolExecutor 是 Java 中用于创建和管理线程池的核心类。它通过一组核心参数来控制线…...

编程日记 2024/6/17 3:52:24

springer 在线投稿编译踩坑

springer投稿&#xff0c;在线编译踩坑总结 注意&#xff1a; 有的期刊需要双栏&#xff0c;而预定义的模板中可能为单栏&#xff0c;需要增加iicol选项。 例如&#xff1a; \documentclass[sn-mathphys-num]{sn-jnl}% —>\documentclass[sn-mathphys-num, iicol]{sn-jnl}…...

编程日记 2024/6/17 3:51:21

固态硬盘的指标

固态硬盘的指标主要包括以下几个方面&#xff1a; 接口类型&#xff1a;这是固态硬盘与外部设备连接的方式&#xff0c;常见的接口类型有SATA、PCIe和NVMe等。不同的接口类型决定了固态硬盘的传输速度和性能。例如&#xff0c;PCIe接口的固态硬盘通常比SATA接口的固态硬盘具有…...

编程日记 2024/6/17 3:49:17

mysql 分组后每个取最新的一条记录

在MySQL中&#xff0c;若要从一个分组中获取每组的最新一条记录&#xff08;通常基于时间戳或其他递增的列&#xff09;&#xff0c;可以使用子查询或者窗口函数&#xff08;如果MySQL版本支持&#xff09;。 以下是两种不同的实现方法&#xff1a; 方法1: 使用子查询和LIMIT…...

编程日记 2024/6/17 3:46:14

Java语法和基本结构介绍

Java语法和基本结构是Java编程的基础&#xff0c;它决定了Java代码的书写方式和程序的结构。以下是Java语法和基本结构的一些关键点&#xff1a; 1.标识符和关键字&#xff1a;Java中的标识符是用来标识变量、函数、类或其他用户自定义元素的名称。关键字是预留的标识符&#x…...

编程日记 2024/6/17 3:45:13

TDengine 3.3.0.0 引入图形化管理工具、复合主键等 13 项关键更新

在涛思数据研发团队的努力下&#xff0c;TDengine 3.3.0.0 版本终于和大家见面了。这一版本中&#xff0c;我们引入了多项革新功能和性能优化&#xff0c;力求在为用户提供极致体验的同时&#xff0c;不断推动技术的前沿。 此次更新不仅针对开源社区版本&#xff0c;进行了一系…...

编程日记 2024/6/17 3:42:11

C++基础之红黑树

二叉搜索树 二叉搜索树&#xff08;Binary Search Tree&#xff0c;BST&#xff09;是一种二叉树&#xff0c;具有以下性质&#xff1a; 左子树节点值小于根节点值&#xff1a;对于树中的每个节点 x&#xff0c;其左子树中所有节点的值都小于 x 的值。右子树节点值大于根节点值…...

编程日记 2024/6/17 3:41:09

ClickHouse数据库对比、适用场景与入门指南

本文全面对比了ClickHouse与其他数据库&#xff08;如StarRocks、HBase、MySQL、Hive、Elasticsearch等&#xff09;的性能、功能、适用场景&#xff0c;并提供了ClickHouse的教学入门指南&#xff0c;旨在帮助读者选择合适的数据库产品并快速掌握ClickHouse的使用。 文章目录 …...

编程日记 2024/6/17 3:39:06

举例说明 如何通过SparkUI和日志定位任务莫名失败？

有一个Task OOM&#xff1a; 通过概览信息&#xff0c;发现Stage 10的Task 36失败了4次导致Job失败。概览信息中显示最后一次失败的退出代码&#xff08;exit code&#xff09;是143&#xff0c;意味着发生了内存溢出&#xff08;OOM&#xff0c;即Out of Memory&#xff09;。…...

编程日记 2024/6/17 3:38:04

Vue前端通过Axios的post方式传输数据，后端为什么一直接收的值是null？

沃靠！这个细节太细了，搞了我两个多小时才找到这个bug。 一、 首先官方文档给我的post请求的例子是这样的： axios.post(/user, {firstName: Fred,lastName: Flintstone}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);})…...

编程日记 2024/6/17 3:35:01

外链建设如何进行？

理解dofollow和nofollow链接&#xff0c;所谓dofollow链接&#xff0c;就是可以传递权重到你的网站的链接&#xff0c;这种链接对你的网站排名非常有帮助&#xff0c;这种链接可以推动你的网站在搜索结果中的位置向上爬&#xff0c;但一个网站全是这种有用的链接&#xff0c;反…...

编程日记 2024/6/17 3:32:58

深入理解Java正则表达式及其应用

正则表达式是一种强大的文本匹配和处理工具&#xff0c;可以在字符串中查找、替换、提取符合特定模式的内容。Java作为一种广泛应用的编程语言&#xff0c;提供了丰富的正则表达式支持。本文将深入探讨Java正则表达式的基本概念、语法以及常见应用场景&#xff0c;帮助读者全面…...

编程日记 2024/6/17 3:31:56

Gstreamer学习3----灌数据给管线之appsrc

参考资料 Basic tutorial 8: Short-cutting the pipeline gstreamer向appsrc发送帧画面的代码_gst appsrc可变帧率-CSDN博客 在官网教程Basic tutorial 8: Short-cutting the pipeline 里面&#xff0c;讲了一个例子&#xff0c;push音频数据给管线&#xff0c;视频的例子更…...

编程日记 2024/6/17 3:30:55

【深度学习量化交易1】一个金融小白尝试量化交易的设想、畅享和遐想

关注我的朋友们可能知道&#xff0c;我经常在信号处理的领域出没&#xff0c;时不时会发一些信号处理、深度学习科普向的文章。 不过算法研究久了&#xff0c;总想做一些更有趣的事情。 比如用深度学习算法赚大钱。。毕竟有什么事情能比暴富更有意思呢。 一、神经网络与彩票…...

编程日记 2024/6/17 3:29:54

【0基础学爬虫】爬虫基础之自动化工具 DrissionPage 的使用

概述 前三期文章中已经介绍到了 Selenium 与 Playwright 、Pyppeteer 的使用方法&#xff0c;它们的功能都非常强大。而本期要讲的 DrissionPage 更为独特&#xff0c;强大&#xff0c;而且使用更为方便&#xff0c;目前检测少&#xff0c;强烈推荐&#xff01;&#xff01;&a…...

编程日记 2024/6/17 3:28:52

c++_0基础_讲解7 练习

这一讲我为大家准备了几道题目&#xff0c;大家试着独自做一下&#xff08;可能来自不同网站&#xff09; 整数大小比较 - 洛谷 题目描述 输入两个整数&#xff0c;比较它们的大小。若 x>yx>y &#xff0c;输出 > &#xff1b;若 xyxy &#xff0c;输出 &#xff…...

编程日记 2024/6/17 3:27:50

docker一些常用命令以及镜像构建完后部署到K8s上

docker一些常用命令以及镜像构建完后部署到K8s上 1.创建文件夹2.删除文件3.复制现有文件内容到新建文件4.打开某个文件5.查看文件列表6.解压文件&#xff08;tar格式&#xff09;7.解压镜像8.查看镜像9.删除镜像10.查看容器11.删除容器12.停止运行容器13.构建镜像14.启动容器15…...

编程日记 2024/6/17 3:26:49

在typora中利用正则表达式，批量处理图片

一&#xff0c;png格式 在 Typora 中批量将 HTML 图片标签转换为简化的 Markdown 图片链接&#xff0c;且忽略 alt 和 style 属性&#xff0c;可以按照以下步骤操作&#xff1a; 打开 Typora 并加载你的文档。按下 Ctrl H&#xff08;在 Windows/Linux 上&#xff09;或 Cmd…...

编程日记 2024/6/17 3:24:47

构建LangChain应用程序的示例代码：33、如何在LangChain框架中使用HumanInputChatModel来模拟人工输入的聊天模型教程

除了HumanInputLLM&#xff0c;LangChain还提供了一个伪聊天模型类&#xff0c;可以用于测试、调试或教育目的。这允许您模拟对聊天模型的调用&#xff0c;并模拟如果人类接收到这些消息会如何响应。 在这篇笔记中&#xff0c;我们将介绍如何使用这个模型。 我们首先在代理中…...

编程日记 2024/6/17 3:23:45

成都有几家做网站的公司/百度站长工具收费吗

springboot学习比较总结&#xff1a;https://pan.baidu.com/s/1dYwvpk spring STS工具安装&#xff1a;https://blog.51cto.com/qinbin/2067347Java系统部署脚本&#xff1a;当想把程序放到后台运行&#xff1a; nohup ./your_command &部署Java&#xff1a;1. 在eclips…...

编程日记 2024/11/2 14:06:21

wordpress 多店铺/北京seo网站开发

步骤&#xff1a; 1&#xff0c;客户端向yarn的RM提交作业请求&#xff0c;RM进行权限等验证&#xff0c;生成jobid、资源上传路径&#xff0c;将jobId和资源上传路径返回给客户端&#xff1b; 2&#xff0c;客户端将jar包、配置文件、第三方包等文件上传到指定的hdfs路径后&…...

编程日记 2024/11/2 13:37:30

武汉网络兼职网站建设/首页排名seo

2019独角兽企业重金招聘Python工程师标准>>> 数据模型<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"&g…...

编程日记 2024/11/2 13:15:15

php手机网站/四年级摘抄一小段新闻

简介 之前我们想到Excel解析一般是使用POI&#xff0c;但POI存在一个严重的问题&#xff0c;就是非常消耗内存。所以阿里人员对它进行了重写从而诞生了easyexcel&#xff0c;它解决了过于消耗内存问题&#xff0c;也对它进行了封装让使用者使用更加便利。 新手同学&#xff0…...

编程日记 2024/11/2 12:43:06

wordpress字菜单/社区营销推广活动方案

启动vim 在命令行窗口中输入以下命令即可 $ vim # 直接启动vim$ vim filename # 打开vim并创建名为filename的文件文件命令 $ vim file # 打开单个文件$ vim file1 file2 file3 ... # 同时打开多个文件:open file # 在vim窗口中打开一个新文件:split file # 在新窗口中…...

编程日记 2024/11/2 12:17:49

解决wordpress图片上传失真/app开发公司推荐

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4553 解题思路&#xff1a; ①题目的意思是询问当前是否能够给出空余的一段连续时间&#xff0c;并且这段时间尽可能靠前。 需要两棵树&#xff0c;一棵屌丝女神&#xff0c;另一棵女神 对于屌丝询问第一棵树…...

编程日记 2024/11/2 11:29:56