11. 瀑布流布局
<!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…...
Flutter-发布插件到pub上传不上问题
问题1： 尝试指令： flutter packages pub publish --serverhttps://pub.dartlang.org问题2： 问题1解决后，进入验证身份，点击终端显示的链接，跳转到google验证，记得这里要科*学上网，点…...
Windows 2008虚拟机安装、安装VM Tools、快照和链接克隆、添加硬盘修改格式为GPT
一、安装vmware workstation软件 VMware workstation的安装介质，获取路径： 链接：https://pan.baidu.com/s/1AUAw_--yjZAUPbsR7StOJQ 提取码：umz1 所在目录：\vmware\VMware workstation 15.1.0 1.找到百度网盘中vmwa…...
c++的学习之路：12、vector（1）
这章主要是根据cplusplus中的文档进行使用Vector，文章末附上测试代码。 目录 一、什么是vector 二、vector的简单使用 三、代码 一、什么是vector 下图是cplusplus的简介，上面一共有六点，如下： 1、vector是表示可变大小数组…...
2024.2.17力扣每日一题——N叉树的层序遍历
2024.2.17 题目来源我的题解方法一 广度优先搜索（队列实现） 题目来源 力扣每日一题；题序：429 我的题解 方法一 广度优先搜索（队列实现） 和二叉树的层序遍历相同，只是在添加子节点的细节有所不…...
滑动窗口（尺取法/Python）
滑动窗口（尺取法） 算法含义： 在解决关于区间特性的题目时保存搜索区间左右端点，然后根据实际要求不断更新左右端点位置的算法 时间复杂度： O ( n ) O(n) O(n) 空间复杂度： O ( 1 ) O(1) O(1) 在历年真题…...
【打印SQL执行日志】⭐️Mybatis-Plus通过配置在控制台打印执行日志
目录 前言 一、Mybatis-Plus 开启日志的方式 二、测试 三、日志分析 章末 前言 小伙伴们大家好，相信大家平时在处理问题时都有各自的方式，最常用以及最好用的感觉还是断点调试，但是涉及到操作数据库的执行时，默认的话在控制台…...
Vue后台管理系统常用组件的优缺点分析
以下是Vue后台管理系统常用组件的优缺点分析： Element UI 优点： 丰富的组件库：Element UI 提供了大量的组件，包括表单、表格、弹窗、导航等，可以满足各种后台管理系统的需求。易于使用：Element UI 的组件…...
栈的应用——用栈实现算数混合运算表达式的计算
1、单目运算符双目运算符 算数运算符分为单目运算符和双目运算符等 单目运算符只需要一个操作数，双目运算符需要两个操作数 双目运算符最常见：常见的算术运算符：*/，比较运算符：<>=等等以下是一些单目运算符:正号 (+): 用于表示正数或给数值一个正号。例如：+5 仍然…...
动态规划—机器人移动问题（Java）
😀前言 机器人移动问题是一个经典的动态规划应用场景，它涉及到在给定范围内的位置上进行移动，并计算到达目标位置的方法数。本文将介绍三种解决这一问题的方法：暴力递归、缓存法和动态规划。通过比较不同方法的优缺点，…...
第十一届蓝桥杯物联网试题（省赛）
对于通信方面，还是终端A、B都保持接收状态，当要发送的数组不为空再发送数据，发送完后立即清除，接收数据的数组不为空则处理，处理完后立即清除，分工明确 继电器不亮一般可能是电压不够 将数据加空格再加\r…...
【Python基础教程】5. 数
🎈个人主页：豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏：python基础教程 🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、…...
Qt中出现中文乱码的原因以及解决方法
Qt专栏：http://t.csdnimg.cn/C2SDN 目录 1.引言 2.原因分析 3.源文件的编码格式修改方法 4.程序内部使用的默认编码格式修改方法 5.QString转std::string的方法 6.总结 1.引言 在编写Qt程序的时候，或多或少都可能遇到用QString时候，明明…...
Linux 文件相关命令
一、查看文件命令 1）浏览文件less 默认查看文件的前 10 行。 less /etc/services ##功能说明： #1.默认打开首屏内容 #2.按【回车】按行访问 #3.按【空格】按屏访问 #4.【从上向下】搜索用/111,搜索包含111的内容，此时按n继续向下搜&#x…...
K8S Deployment 简介， 1个简单的Kubernetes Deployment YAML 文件
当谈到 Kubernetes 集群中的应用程序部署和管理时，Deployment、ReplicaSet 和 Pod 是三个重要的概念。它们之间存在一定的关系和层次结构。下面是对 Deployment、ReplicaSet 和 Pod 的详细解释以及它们之间的关系。 Deployment（部署） Deploy…...
win11安装WSL UbuntuTLS
win11安装WSL WSL 简介WSL 1 VS WSL 2先决要求安装方法一键安装通过「控制面板」安装 WSL 基本命令Linux发行版安装Ubuntu初始化相关设置root用户密码网络工具安装安装1panel面板指导 WSl可视化工具问题总结WSL更新命令错误Ubuntu 启动初始化错误未解决问题 WSL 简介 Windows …...
第十题：金币
题目描述 国王将金币作为工资，发放给忠诚的骑士。第一天，骑士收到一枚金币；之后两天（第二天和第三天），每天收到两枚金币；之后三天（第四、五、六天），每天收到…...
Windows 11 中Docker的安装教程
选择正确的Docker版本 在Windows上，你可以安装两种类型的Docker：Docker Desktop和Docker Toolbox。Docker Desktop是针对Windows 10 Pro、Enterprise和Education版本的，这些版本内置了Hyper-V虚拟化支持。对于旧版本的Windows，比…...
纯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] < …...
二、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.…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
大数据学习（132）-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言Ǵ…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...