js写瀑布流

最新推荐文章于 2024-04-02 13:55:42 发布

小手冰凉007

最新推荐文章于 2024-04-02 13:55:42 发布

阅读量70

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_44437258/article/details/106673396

版权

简单的瀑布流分享一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				position: absolute; 
			}
		</style>
	</head>
	<body>
		
	</body>
</html>
<script>
class WaterFall{
			createDiv(){ //创建div
				for(let i=0;i<14;i++){
					let oDiv=document.createElement("div");
					let rnd=Math.round(Math.random()*300+50);
					oDiv.style.height=rnd+"px";
					oDiv.style.backgroundImage="url(img/"+i+".jpg)";//这里的图片名字要改成数字.jpg格式 (如：1.ipg）
					oDiv.style.backgroundSize="200px"+rnd+"px";
					document.body.appendChild(oDiv);
					
				}
				this.change();
			}
			change(){
				let n=Math.floor(window.innerWidth/210);
				let arrH=[];
				let oDiv=document.getElementsByTagName("div");
				for(let i=0;i<oDiv.length;i++){
					if(arrH.length==n){
						let minIndex=this.findMin(arrH);
						oDiv[i].style.left=minIndex*200+minIndex*10+"px";
						oDiv[i].style.top=arrH[minIndex]+10+"px";
						arrH[minIndex]+=oDiv[i].offsetHeight+10;
					}else{
						oDiv[i].style.top=0;
						oDiv[i].style.left=i*200+i*10+"px";
						arrH[i]=oDiv[i].offsetHeight;
					}
				}
			}
			findMin(arrH){
				let minIndex=0;
				
				for(let i=0;i<arrH.length;i++){
					if(arrH[minIndex]>arrH[i]){
						minIndex=i;
					}
				}
				return minIndex;
			}
		}
let wf=new WaterFall();
wf.createDiv();
wf.createDiv();
wf.createDiv();
</script>

小手冰凉007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js写瀑布流

简单的瀑布流分享一下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; position: absolute; } </style> &lt
复制链接

扫一扫