普通瀑布流(错落有致的排列,水平不对齐，左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)

最新推荐文章于 2024-04-28 14:09:16 发布

神奇大叔

最新推荐文章于 2024-04-28 14:09:16 发布

阅读量1.5k

点赞数

分类专栏： javaScript 网页制作案例

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103454644

版权

javaScript 同时被 2 个专栏收录

127 篇文章 6 订阅

订阅专栏

网页制作案例

41 篇文章 3 订阅

订阅专栏

解决问题:
如何获得每一排存放的图片数，并且能随着窗口的改变而改变（考虑小数的情况）
如何获得包裹整个图片的div的宽度
如何获得第一排的最小高度
如何使第二排的第一张图片的高度是第一排最小高度加上本身高度
如何使得之后的排都按照前两排的格式排列，即如何改变第一排高度内数组的值
图片的定位问题

代码示例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			.box{
				margin:0px  auto;
				position:relative ;
			
				
			}
			img{
				margin:10px;
				padding: 10px;
				border: solid 1px pink;
				border-radius:10px;
				box-shadow:5px 5px 10px skyblue
			}
			
			.w{
				float:left;
				
			}
			
		</style>
	</head>
	<body>
		<div class="box"></div>
		
		<script>
			var box=document.querySelector(".box");
			
			var dataStr = '{"src":["i1.jpg","i2.jpg","i3.jpg","i4.jpg","i5.jpg","i6.jpg","i7.jpg","i8.jpg","i9.jpg","i10.jpg","i11.jpg","i12.jpg","i13.jpg","i14.jpg","i15.jpg"]}';
			var data=JSON.parse(dataStr);
			
			//遍历对象，确定创建多少个div
			for(var i=0;i<data.src.length;i++)
			{
				 var imgDiv = document.createElement('div');
				var img=document.createElement("img");
				//获取图片路径
				img.src="img/"+data.src[i];
				imgDiv.className = 'w';
				imgDiv.appendChild(img);
				box.appendChild(imgDiv);
				
				
				
				
			}
			
			window.onload=function()
			{
				//让瀑布流居中
				
				//获取视口的宽度
				var viewWidth=document.documentElement.clientWidth;
				
				//用视口的宽度除一个div的宽度，即可随着视口的变化，动态改变每一行的数量
				/*通过类名获取创建的div*/
				var divs=document.querySelectorAll(".w");
				
				var oneWidth=divs[0].offsetWidth;
				var count=Math.floor(viewWidth/oneWidth);
				
				//数量乘一个div的宽度即可获取总宽度
				box.style.width=count*oneWidth+'px';
				console.log(count*oneWidth);
				//成型
				//存储第一行每个元素的高度
				var heightArr=[];
				for(var i=0;i<divs.length;i++)
				{
					if(i<count)
					{
						heightArr.push(divs[i].offsetHeight);
					}else{
						//计算第二行的每张图片拜访位置，从上一行最小高度的图片下摆放
						var minValue=Math.min.apply(null,heightArr);
						//获取最小值在数组内的下标
						var minIndex=heightArr.indexOf(minValue);
						
						var x=divs[minIndex].offsetLeft;
						//使得下一排的div的高度，为数组中最小的高度
						var y=minValue;
					
						//给创建的div加定位，相对于整个div
						divs[i].style.position='absolute';
						
						divs[i].style.left=x+'px';
						divs[i].style.top=y+'px';
						
						//改变最小的div的高度，使得下一排的第二张照片在上一排的第二小的照片下摆放
						
						console.log(heightArr);
						heightArr[minIndex]=minValue+divs[i].offsetHeight;
						
						
					}
				}
				
			}
			
		</script>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
普通瀑布流(错落有致的排列,水平不对齐，左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)

解决问题:如何获得每一排存放的图片数，并且能随着窗口的改变而改变（考虑小数的情况）如何获得包裹整个图片的div的宽度如何获得第一排的最小高度如何使第二排的第一张图片的高度是第一排最小高度加上本身高度如何使得之后的排都按照前两排的格式排列，即如何改变第一排高度内数组的值图片的定位问题代码示例<html> <head> <meta charset="...
复制链接

扫一扫