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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/794068.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

11. 瀑布流布局

相关文章

B/S架构SaaS模式医院云HIS系统源码，自主研发，支持电子病历4级

【并发编程】线程安全

ubuntu20.04 安裝PX4 1.13

【QT+QGIS跨平台编译】056：【pdal-dimbuilder+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

基于微信小程序的实验室预约系统的设计与开发

Azure 虚拟机端口排障

[C#]OpenCvSharp使用帧差法或者三帧差法检测移动物体

模糊控制对应关系

git 储藏功能操作

算法——搜索：两个水壶得到指定容积的水，哈希表hash_function

猫头虎分享已解决Bug: ERROR: Could not find a version that satisfies the requirement

关联规则(理论及实例)

剑指Offer题目笔记25（使用回溯法解决其他类型问题）

SD-WAN国际网络专线：高效、合规且可靠的跨境连接解决方案

Spring Boot介绍

【C++】排序算法 --快速排序与归并排序

12-项目部署_持续集成

【解读Kubernetes架构】全面指南，带你掌握Kubernetes的设计原理与构成！

《QT实用小工具·十四》面板容器控件和图形字体示例

嵌入式软件架构演进：轮询系统、前后台系统、RTOS 架构特点和选择