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

约定不等于承诺〃 2021-07-24 22:18 140阅读 0赞

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