照片瀑布流

于 2019-10-16 17:21:52 发布
阅读量105 收藏
点赞数
分类专栏： JS 文章标签： HTML 瀑布流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45621713/article/details/102588452
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图墙</title>
	<style>
		*{//消除内外边距
			padding: 0;
			margin: 0;
		}
		#itemBox{
		//给大div 指定宽高 相对定位 剧中
			width: 1050px;
			height: 100px;
			margin: 0px auto;
			position: relative;
		}
		.item{
		//给照片设置边框 内边距  绝对定位
			border: 1px solid #ccc;
			padding: 4px;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="itemBox">
<div class="item">
	<img src="images/P_006.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_000.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_001.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_002.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_003.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_004.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_005.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_006.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_000.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_001.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_002.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_003.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_004.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_005.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_006.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_000.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_001.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_002.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_003.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_004.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_005.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_006.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_000.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_001.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_002.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_003.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_004.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_005.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_006.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_000.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_001.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_002.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_003.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_004.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_005.jpg" alt="#">
</div>
<div class="item">
	<img src="images/P_006.jpg" alt="#">
</div>
	</div>

	<script type="text/javascript">
	//页面加载完成时执行代码
		window.onload=function(){
		//获取元素
			var itemBox=document.getElementById('itemBox');
			var items=document.getElementsByClassName('item');
			//获取元素的宽度 
			
			var itemBoxW=itemBox.offsetWidth;
			//获取大div的宽度
			var itemW=items[0].offsetWidth;
			//获取照片的宽度
			var c=parseInt(itemBoxW / itemW);
			//计算要排多少列
			var d=(itemBoxW - c*itemW)/c;
			//计算每张照片之间的空袭
			var arr=[]; //定义一个空数组
			waterFull();//瀑布效果
			function waterFull(){
				for (var i = 0; i < items.length; i++) {
					if (i<c) //第一排的照片 排放位置
					{	
						items[i].style.left=(itemW + d) * i + "px";
						items[i].style.top=d + "px";
						arr[i]=items[i].offsetHeight + d;
					}else//第二排及以后添加照片的位置
					{   //定义一个变量  获取数组中照片高度最低的那一个
						var minH=getMin(arr).minH;
						//获取第一排照片的最低高度（height）的照片
						var minI=getMin(arr).minI;
						//获取最低（height）照片所在的列
						items[i].style.left=(itemW + d) * minI + "px";                  
						//把新照片添加所在的列 
						items[i].style.top=minH + d + "px";
						//把照片放在在高度最低的照片下面
						
						arr[minI]=arr[minI]+items[i].offsetHeight+d;
						//刷新照片最低的高度 重新找其他列剩余的最低高度 添加照片
					}
					
				}
			}
			function getMin(arr){
//获取数组的最小值以及索引  返回多个值  封装对象
				var obj={};
				//对象名.属性名 = 属性值
				obj.minH=arr[0];
				obj.minI=0;
				for (var i = 1; i < arr.length; i++) {
					if (arr[i] < obj.minH)
					//如果有元素比该元素小 就把更小的值赋值给他 并获取索引
 {
						obj.minH=arr[i];
						obj.minI=i;
					}
				}
				return obj;
				返回数组
			}
			// 6.滚动页面时，加载数据
			window.onscroll = function() {
			
				if (window.pageYOffset + window.innerHeight > getMin(arr).minH)
					// 当文档左上角滚动的距离 加上 当前窗口高度  > 高度
				 {
					
					var json = [
						{ "src": "images/P_000.jpg" },
	                    { "src": "images/P_001.jpg" },
	                    { "src": "images/P_002.jpg" },
	                    { "src": "images/P_003.jpg" },
	                    { "src": "images/P_004.jpg" },
	                    { "src": "images/P_005.jpg" },
	                    { "src": "images/P_006.jpg" },
	                    { "src": "images/P_007.jpg" },
	                    { "src": "images/P_008.jpg" },
	                    { "src": "images/P_009.jpg" },
	                    { "src": "images/P_010.jpg" }
					];
					for (var i = 0; i < json.length; i++) 
					//遍历新的图片数组
					{
						var div =document.createElement('div');
						div.className = 'item';
						//创建div
						var img =document.createElement('img');
						//添加图片
						img.src = json[i].src;
						//获取图片地址
						div.appendChild(img);
						//往新的div中添加图片
						itemBox.appendChild(div);
						//加ru到页面父元素布局
					}
					waterFull();
					//执行瀑布流
				}
			}
		}
	</script>
</body>
</html>
qq_1405449844
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
照片墙瀑布流
10-20
【照片墙瀑布流】是一种常见的UI设计模式，尤其在安卓应用中广泛应用于图片展示场景，如社交媒体、图库应用等。这种布局方式模仿了瀑布流动的视觉效果，使得图片能够自上而下连续不断地呈现，当用户滚动屏幕时，新...
Unity工程 照片墙 瀑布流
03-29
Unity大屏展示照片墙 1、照片墙设置：是否流动动态照片、流动速度 2、照片的点击弹出；（含有碰撞、挤压） 3、照片的出场动画、弹出动画 4、2D物理系统 5、弹出翻页功能
照片瀑布流插件.rar
05-10
本压缩包“照片瀑布流插件.rar”很可能是用于实现这种布局的一个jQuery插件。 瀑布流布局的主要特点是以多列的形式排列元素，每列高度不固定，新元素会自动填充到下一列的底部，形成类似瀑布的效果。在照片展示场景...
详解照片瀑布流效果（js，jquery分别实现与知识点总结）
10-20
【照片瀑布流效果详解】 照片瀑布流是一种网页布局方式，常用于展示图片，如社交媒体、摄影网站等。这种布局的特点是让图片自适应地排列，形成类似瀑布般连续下降的效果，每行的图片数量可能不一致，但整体视觉上...
RecyclerView结合CardView的照片瀑布流
04-26
当将RecyclerView与CardView结合使用时，可以实现类似照片瀑布流的效果，即多个卡片以不同高度排列，形成一种视觉上的瀑布效果。下面将详细介绍这两个组件以及如何结合它们来创建照片瀑布流。 1. RecyclerView基础...
HTML制作制作小游戏
qq_45621713的博客
10-16 5242
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } #ga...
JS(API,事件，元素，JS的组成三部分)
qq_45621713的博客
09-24 674
Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征 输入和输出(I/O) var max = Math.max(2, 1 ,...
js（链式编程）
qq_45621713的博客
10-12 582
链式编程 ​ 将多行代码合并到一行 注意：返回值为对象时可以采用链式编程，当是一个字符串时则不能使用链式编程 两种绑定事件 方法一： 为需要绑定事件的标签添加一个属性onclick 代码实现： <input type=“button” value=“点我” οnclick=“btn1()” /> function btn1(){ alert(“btn1”); } 方法二： 用jquer...
JS(fullpage)的使用
qq_45621713的博客
10-11 306
fullpage 全屏插件 鼠标滚轮事件，绑定页面宽高 fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。 全球最大代码托管网站 github 官网 https://github.com/alvarotrigo/fullPage.js 中文演示地址 http://www.dowebok.com/demo/2014/77/ 主要功能有： ...
JS(qq浏览器官网的滑屏实现)
qq_45621713的博客
10-11 255
步骤 ​ 1.引入相关文件 <!-- css --> <!-- 1.1 fullpage 相关css文件 --> <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> <!-- 1.1 自定义相关css文件 --> <!-- js --> ...
JS(函数，数组,对象及调试工具)
qq_45621713的博客
09-23 202
调试 debug 断点调试 目的：为了检验代码的错误或查看代码具体运行步骤 调试步骤：1.打开控制台 2.找到需要调试的文件 3.设置断点 相关操作： watch：监视变量的变化 f8执行到下个断点，如果没有断点就执行完 f10程序单步执行 数组 为什么要学习数组 之前学过的数据类型，只能存贮一个值 数组的概念 所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合...
JS(创建元素的三种方式&事件的三个阶段)
qq_45621713的博客
09-25 190
自定义属性操作 getAttribute() 获取标签行内属性 setAttribute() 设置标签行内属性 removeAttribute() 移除标签行内属性 与element.属性的区别: 上述三个方法用于获取任意的行内（自定义）属性。 样式(css)操作 样式显示在标签行内 var div1 = document.getElementById('div1'); div...
JS(正则表达式)
qq_45621713的博客
10-14 111
正则表达式简介 什么是正则表达式 正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。 正则表达式...
JS（JQuery高级）
qq_45621713的博客
10-08 109
JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1.speed:动画的速度，三个预定义('slow','normal','fast'),或表示动画时长毫秒值 2.easing:切换效果，默认值'swing',可选参数'linear' *swing 先慢，再快，...
《传感器及应用》课程试题(A卷).doc
07-16
传感器
计算机网络期末复习.docx
07-16
计算机网络期末复习可以涵盖多个方面，包括计算机网络的基本概念、组成、功能、性能指标、体系结构以及各层协议等。以下是一个较为全面的复习框架： 一、计算机网络的基本概念 定义：计算机网络是将地理位置上分散的、具有独立功能的计算机系统，通过通信设备和线路连接起来，由功能完善的软件实现资源共享和信息传递的系统。 组成：从组成部分上看，计算机网络包括硬件、软件和协议；从工作方式上看，分为边缘网络和核心网络；从功能组成上看，分为通信子网（包括网桥、交换机和路由器）和资源子网（如计算机软件）。 二、计算机网络的分类 按分布范围分：广域网（WAN）、城域网（MAN）、局域网（LAN）、个域网（PAN）。 按使用者分：公用网、专用网。 按拓扑结构分：总线型、星型、环形、网状型。 三、计算机网络的功能 数据通信 资源共享（包括软件、硬件和数据） 分布式处理 提高可靠性 负载均衡 四、计算机网络的性能指标 时延：包括发送时延、传播时延等。发送时延=分组长度/信道宽度；传播时延=信道长度/电磁波在信道上的传播速率。 速率：连接到计算机网络上的主机在数字信道上传送数据的速率，也称数据传输速率、数据率或比特率，
传感器复习资料.doc
07-16
传感器
探索Java数据库连接的奥秘：JDBC的深度解析与实践
最新发布
07-16
Java是一种广泛使用的编程语言，由Sun Microsystems公司（现属于Oracle公司）在1995年首次发布。它是一种面向对象的语言，意味着它将现实世界中的事物抽象为对象，这些对象具有属性（数据）和方法（行为）。Java语言设计目标包括跨平台性、网络编程能力、健壮性、安全性和简单性。 ### Java的主要特点： 1. **跨平台性**：Java的口号是“一次编写，到处运行”（Write Once, Run Anywhere，简称WORA）。这得益于Java的运行时环境，即Java虚拟机（JVM），它允许Java程序在任何安装了JVM的平台上运行，而不需要重新编译。 2. **面向对象**：Java是一种面向对象的语言，支持封装、继承和多态等特性。 3. **健壮性**：Java设计时注重安全性和错误处理，例如通过强类型检查和异常处理机制。 4. **多线程**：Java内置了对多线程编程的支持，允许开发者创建同时执行的多个线程。 5. **网络编程**：Java提供了丰富的网络通信API，使得开发网络应用变得容易。 6. **安全性**：Java提供了一个安全
unity瀑布流照片墙
10-13
Unity瀑布流照片墙是一种实现照片展示及排列的方式。利用Unity引擎开发的瀑布流照片墙可以在游戏或应用程序中展示照片，并以流畅的动画效果进行排列和切换。 首先，我们需要准备要展示的照片资源。这些照片可以是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值