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.…...
【详细注释+流程讲解】基于深度学习的文本分类 TextCNN
前言 这篇文章用于记录阿里天池 NLP 入门赛,详细讲解了整个数据处理流程,以及如何从零构建一个模型,适合新手入门。 赛题以新闻数据为赛题数据,数据集报名后可见并可下载。赛题数据为新闻文本,并按照字符级别进行匿名…...
Day.21
interface MyInterface{public final static int PI 3;void show();public default void printX(){System.out.println("接口默认方法");}public static void printY(){System.out.println("接口静态方法");}}class MyClass implements MyInterface{publi…...
Spring-IoC 基于注解
基于xml方法见:http://t.csdnimg.cn/dir8j 注解是代码中的一种特殊标记,可以在编译、类加载和运行时被读取,执行相应的处理,简化 Spring的 XML配置。 格式:注解(属性1"属性值1",...) 可以加在类上…...
Spring声明式事务以及事务传播行为
Spring声明式事务以及事务传播行为 Spring声明式事务1.编程式事务2.使用AOP改造编程式事务3.Spring声明式事务 事务传播行为 如果对数据库事务不太熟悉,可以阅读上一篇博客简单回顾一下:MySQL事务以及并发访问隔离级别 Spring声明式事务 事务一般添加到…...
【C语言数据库】Sqlite3基础介绍
1. SQLite简介 SQLite is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine. SQLite is the most used database engine in the world. SQLite is built into all mobile phones and most computer…...
el-upload上传图片图片、el-load默认图片重新上传、el-upload初始化图片、el-upload编辑时回显图片
问题 我用el-upload上传图片,再上一篇文章已经解决了,el-upload上传图片给SpringBoot后端,但是又发现了新的问题,果然bug是一个个的冒出来的。新的问题是el-upload编辑时回显图片的保存。 问题描述:回显图片需要将默认的 file-lis…...
【拓扑空间】示例及详解1
例1 度量空间的任意两球形邻域的交集是若干球形邻域的并集 Proof: 任取空间的两个球形邻域、,令 任取,令 球形领域 例2 规定X的子集族,证明是X上的一个拓扑 Proof: 1. 2., (若干个球形邻域的并集都是的元素,元素…...
linux安装jdk8
上传到某个目录,例如:/usr/local/ tar -xvf jdk-8u144-linux-x64.tar.gz配置环境变量: export JAVA_HOME/usr/local/java export PATH$PATH:$JAVA_HOME/bin设置环境变量: source /etc/profile...
Spring重点知识(个人整理笔记)
目录 1. 为什么要使用 spring? 2. 解释一下什么是 Aop? 3. AOP有哪些实现方式? 4. Spring AOP的实现原理 5. JDK动态代理和CGLIB动态代理的区别? 6. 解释一下什么是 ioc? 7. spring 有哪些主要模块?…...
HTML基础知识详解(上)(如何想知道html的全部基础知识点,那么只看这一篇就足够了!)
前言:在学习前端基础时,必不可少的就是三大件(html、css、javascript ),而HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦,它定义了网页内容的含义和…...
好的培训网站模板/郑州seo网站管理
我想告诉你Android开发你还在用JAVA吗?现在开始使用新的编程语言了,自从Kotlin成为谷歌官方语言后,你有没有心动呢? 我想告诉你一个名为Kotlin的新编程语言并且阐述为什么你应该考虑下一个项目中使用它。我以前非常喜欢使用JAVA,但…...
手机网站 后台/seo数据
AUTOSAR标准的安全通信为支持功能安全,AUTOSAR标准结合ISO 26262功能安全标准,在基础软件层从安全执行、安全通信以及安全内建测试三个方面做出了规范,并规范 AUTOSAR标准的安全通信 为支持功能安全,AUTOSAR标准结合ISO 26262功能…...
山东省山东省建设厅网站/网页设计与制作案例教程
你如何读懂路由表, 你能读懂路由表吗?不懂?进来看看吧!当前的路由: destination 目的网段 mask 子网掩码 interface 到达该目的地的本路由器的出口ip gateway 下一跳路由器入口的ip,路由器通过interface和gateway定义一…...
如何做网站的实时画面/美国疫情最新情况
本文首发于InfoQ。 Java 8在Lambda表达式、接口默认方式、新的日期API等方面引入的新特性广受关注,同时在并发编程方面也做出了大量改进。以往的几个Java版本都对java.util.concurrent做了不同程度的增强,比如Java 7的Fork/Join框架,而Java 8…...
招商信息发布网站大全/营销型企业网站
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ P2P的一个常见问题是如何高效的定位节点,也就是说,一个节点怎样高效的知道在网络中的哪个节点包含它所寻找的数据,如下图: 对此,有三种比较典…...
flashfxp 网站/sem论坛
本文旨在记录实验过程,原理相关请参见其他相关资料实验目的:模拟在物理机中安装kvm虚拟机并搭建cobbler服务器, 实现自动化(个性化)安装。真实环境,可以在IDC机房中将物理机连接到同一二层交换机接可以&…...