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

121 阅读 0 评论 80 点赞

我是靠谱客的博主文艺睫毛膏，这篇文章主要介绍普通瀑布流(错落有致的排列,水平不对齐，左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)，现在分享给大家，希望可以做个参考。

解决问题:
如何获得每一排存放的图片数，并且能随着窗口的改变而改变（考虑小数的情况）
如何获得包裹整个图片的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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<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>