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

11. 瀑布流布局

news 2025/12/27 4:50:24 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>11.瀑布流布局</title><style>#container {position: relative;}img {position: absolute;}</style></head><body><div id="container"></div></body><script>var divContainer = document.getElementById('container')var imgWidth = 220 //每张图片的固定宽度//1. 加入图片元素function createImgs() {for (var i = 0; i <= 40; i++) {var height = Math.ceil(Math.random() * 100 + 200)var src = 'https://picsum.photos/220/' + height //生成图片的src路径var img = document.createElement('img')img.onload = setPoisionsimg.src = src //设置src路径divContainer.appendChild(img) //添加到容器中}}createImgs()// 2. 设置每张图片的位置function setPoisions() {/*** 计算一共有多少列，以及每一列之间的间隙*/function cal() {var containerWidth = divContainer.clientWidth //容器的宽度//计算列的数量var columns = Math.floor(containerWidth / imgWidth)//计算间隙var spaceNumber = columns + 1 //间隙数量var leftSpace = containerWidth - columns * imgWidth //计算剩余的空间var space = leftSpace / spaceNumber //每个间隙的空间return {space: space,columns: columns,}}var info = cal() //得到列数，和 间隙的空间var nextTops = new Array(info.columns) //该数组的长度为列数，每一项表示该列的下一个图片的纵坐标nextTops.fill(0) //将数组的每一项填充为0for (var i = 0; i < divContainer.children.length; i++) {var img = divContainer.children[i]//找到nextTops中的最小值作为当前图片的纵坐标var minTop = Math.min.apply(null, nextTops)img.style.top = minTop + 'px'//重新设置数组这一项的下一个top值var index = nextTops.indexOf(minTop) //得到使用的是第几列的top值nextTops[index] += img.height + info.space//横坐标var left = (index + 1) * info.space + index * imgWidthimg.style.left = left + 'px'}var max = Math.max.apply(null, nextTops) //求最大值divContainer.style.height = max + 'px' //3. 设置容器的高度}var timerId = null //一个计时器的idwindow.onresize = function () {//窗口尺寸变动后，重新排列if (timerId) {clearTimeout(timerId)}timerId = setTimeout(setPoisions, 300)}</script>
</html>

相关文章：

11. 瀑布流布局

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>11.瀑布流布局</title><style>#cont…...

编程日记 2024/4/5 21:35:39

Flutter-发布插件到pub上传不上问题

问题1&#xff1a; 尝试指令&#xff1a; flutter packages pub publish --serverhttps://pub.dartlang.org问题2&#xff1a; 问题1解决后&#xff0c;进入验证身份&#xff0c;点击终端显示的链接&#xff0c;跳转到google验证&#xff0c;记得这里要科*学上网&#xff0c;点…...

编程日记 2024/4/5 21:34:38

Windows 2008虚拟机安装、安装VM Tools、快照和链接克隆、添加硬盘修改格式为GPT

一、安装vmware workstation软件 VMware workstation的安装介质&#xff0c;获取路径&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1AUAw_--yjZAUPbsR7StOJQ 提取码&#xff1a;umz1 所在目录&#xff1a;\vmware\VMware workstation 15.1.0 1.找到百度网盘中vmwa…...

编程日记 2024/4/5 21:30:34

c++的学习之路：12、vector（1）

这章主要是根据cplusplus中的文档进行使用Vector&#xff0c;文章末附上测试代码。 目录 一、什么是vector 二、vector的简单使用 三、代码 一、什么是vector 下图是cplusplus的简介&#xff0c;上面一共有六点&#xff0c;如下&#xff1a; 1、vector是表示可变大小数组…...

编程日记 2024/4/5 21:29:33

2024.2.17力扣每日一题——N叉树的层序遍历

2024.2.17 题目来源我的题解方法一 广度优先搜索&#xff08;队列实现&#xff09; 题目来源 力扣每日一题&#xff1b;题序&#xff1a;429 我的题解 方法一 广度优先搜索&#xff08;队列实现&#xff09; 和二叉树的层序遍历相同&#xff0c;只是在添加子节点的细节有所不…...

编程日记 2024/4/5 21:28:32

滑动窗口（尺取法/Python）

滑动窗口&#xff08;尺取法&#xff09; 算法含义&#xff1a; 在解决关于区间特性的题目时保存搜索区间左右端点&#xff0c;然后根据实际要求不断更新左右端点位置的算法 时间复杂度&#xff1a; O ( n ) O(n) O(n) 空间复杂度&#xff1a; O ( 1 ) O(1) O(1) 在历年真题…...

编程日记 2024/4/5 21:23:26

【打印SQL执行日志】⭐️Mybatis-Plus通过配置在控制台打印执行日志

目录 前言 一、Mybatis-Plus 开启日志的方式 二、测试 三、日志分析 章末 前言 小伙伴们大家好&#xff0c;相信大家平时在处理问题时都有各自的方式&#xff0c;最常用以及最好用的感觉还是断点调试&#xff0c;但是涉及到操作数据库的执行时&#xff0c;默认的话在控制台…...

编程日记 2024/4/5 21:13:19

Vue后台管理系统常用组件的优缺点分析

以下是Vue后台管理系统常用组件的优缺点分析&#xff1a; Element UI 优点&#xff1a; 丰富的组件库&#xff1a;Element UI 提供了大量的组件&#xff0c;包括表单、表格、弹窗、导航等&#xff0c;可以满足各种后台管理系统的需求。易于使用&#xff1a;Element UI 的组件…...

编程日记 2024/4/5 21:10:16

栈的应用——用栈实现算数混合运算表达式的计算

1、单目运算符双目运算符 算数运算符分为单目运算符和双目运算符等 单目运算符只需要一个操作数，双目运算符需要两个操作数 双目运算符最常见：常见的算术运算符：*/，比较运算符：<>=等等以下是一些单目运算符:正号 (+): 用于表示正数或给数值一个正号。例如：+5 仍然…...

编程日记 2024/4/5 21:02:09

动态规划—机器人移动问题（Java）

&#x1f600;前言 机器人移动问题是一个经典的动态规划应用场景&#xff0c;它涉及到在给定范围内的位置上进行移动&#xff0c;并计算到达目标位置的方法数。本文将介绍三种解决这一问题的方法&#xff1a;暴力递归、缓存法和动态规划。通过比较不同方法的优缺点&#xff0c;…...

编程日记 2024/4/5 20:59:06

第十一届蓝桥杯物联网试题（省赛）

对于通信方面&#xff0c;还是终端A、B都保持接收状态&#xff0c;当要发送的数组不为空再发送数据&#xff0c;发送完后立即清除&#xff0c;接收数据的数组不为空则处理&#xff0c;处理完后立即清除&#xff0c;分工明确 继电器不亮一般可能是电压不够 将数据加空格再加\r…...

编程日记 2024/4/5 20:58:04

【Python基础教程】5. 数

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;python基础教程 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、…...

编程日记 2024/4/5 20:55:02

Qt中出现中文乱码的原因以及解决方法

Qt专栏&#xff1a;http://t.csdnimg.cn/C2SDN 目录 1.引言 2.原因分析 3.源文件的编码格式修改方法 4.程序内部使用的默认编码格式修改方法 5.QString转std::string的方法 6.总结 1.引言 在编写Qt程序的时候&#xff0c;或多或少都可能遇到用QString时候&#xff0c;明明…...

编程日记 2024/4/5 20:54:01

Linux 文件相关命令

一、查看文件命令 1&#xff09;浏览文件less 默认查看文件的前 10 行。 less /etc/services ##功能说明&#xff1a; #1.默认打开首屏内容 #2.按【回车】按行访问 #3.按【空格】按屏访问 #4.【从上向下】搜索用/111,搜索包含111的内容&#xff0c;此时按n继续向下搜&#x…...

编程日记 2024/4/5 20:52:59

K8S Deployment 简介， 1个简单的Kubernetes Deployment YAML 文件

当谈到 Kubernetes 集群中的应用程序部署和管理时&#xff0c;Deployment、ReplicaSet 和 Pod 是三个重要的概念。它们之间存在一定的关系和层次结构。下面是对 Deployment、ReplicaSet 和 Pod 的详细解释以及它们之间的关系。 Deployment&#xff08;部署&#xff09; Deploy…...

编程日记 2024/4/5 20:51:58

win11安装WSL UbuntuTLS

win11安装WSL WSL 简介WSL 1 VS WSL 2先决要求安装方法一键安装通过「控制面板」安装 WSL 基本命令Linux发行版安装Ubuntu初始化相关设置root用户密码网络工具安装安装1panel面板指导 WSl可视化工具问题总结WSL更新命令错误Ubuntu 启动初始化错误未解决问题 WSL 简介 Windows …...

编程日记 2024/4/5 20:49:56

第十题：金币

题目描述 国王将金币作为工资&#xff0c;发放给忠诚的骑士。第一天&#xff0c;骑士收到一枚金币&#xff1b;之后两天&#xff08;第二天和第三天&#xff09;&#xff0c;每天收到两枚金币&#xff1b;之后三天&#xff08;第四、五、六天&#xff09;&#xff0c;每天收到…...

编程日记 2024/4/5 20:46:53

Windows 11 中Docker的安装教程

选择正确的Docker版本 在Windows上&#xff0c;你可以安装两种类型的Docker&#xff1a;Docker Desktop和Docker Toolbox。Docker Desktop是针对Windows 10 Pro、Enterprise和Education版本的&#xff0c;这些版本内置了Hyper-V虚拟化支持。对于旧版本的Windows&#xff0c;比…...

编程日记 2024/4/5 20:45:51

纯C代码模板

一、快排 void QuickSort(int *a,int left,int right){if(left>right) return;else{int low left,high right;int pivot a[low];while(low<high){while(a[high] > pivot && low < high){high--;}a[low] a[high]; //必须先动a[low]while(a[low] < …...

编程日记 2024/4/5 20:44:50

二、GitLab相关操作

GitLab相关操作 一、组、用户、项目管理1.创建组2.创建项目3.创建用户并分配组3.1 创建用户3.2 设置密码3.3 给用户分配组 二、拉取/推送代码1.配置ssh(第一次需要)1.1 创建一个空文件夹1.2 配置本地仓账号和邮箱1.3 生成ssh公钥密钥1.4 gitlab配置公钥 2.拉取代码3.推送代码3.…...

编程日记 2024/4/5 20:43:49

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/12/19 21:51:58

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/12/11 19:08:52

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/12/21 1:58:35

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/12/27 0:27:40

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/12/25 13:12:22

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/12/14 1:44:27

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/11/10 19:07:59