js规则的瀑布流

最新推荐文章于 2025-08-16 14:08:26 发布

原创最新推荐文章于 2025-08-16 14:08:26 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js效果图专栏收录该内容

10 篇文章

订阅专栏

规则的瀑布流

具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 1000px;
				margin: 0 auto;
				background: #ccc;
			}
			ul{
				list-style: none;
				float: left;
				width: 180px;
				margin:0 5px;
			}
		
			.oli{
				width: 100%;
				height: 280px;
				background: red;
				color: #fff;
				font-size: 100px;
				text-align: center;
				float: left;
				margin: 3px 0;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="list"></ul>
			<ul class="list"></ul>
			<ul class="list"></ul>
			<ul class="list"></ul>
			<ul class="list"></ul>
		</div>
	</body>
	<script type="text/javascript">
		var olist=document.getElementsByClassName('list');
		var n=1;
		function fun(){
			for(var i=0; i<20; i++){
				//创建li标签
				var oli=document.createElement('li');
				//给li标签添加编码序号
				oli.innerHTML=n++;
				oli.setAttribute('class','oli')
				var oulHeight=[];
				//循环将ul的高度的值添加到数组的里面
				//[0,0,0,0]
				for(var j=0; j<olist.length; j++){
					oulHeight.push(olist[j].offsetHeight);
					
				}
				//获取数组中下标为0的元素赋值给minH  minH=0
				console.log(oulHeight)
				var minH=oulHeight[0];
				var index=0;
				
				//循环ul的长度，minH=0 第一次m是0 oulHeight[0]
				for(var m=0; m<olist.length; m++){
					if(minH>oulHeight[m]){
						minH=oulHeight[m];
						index=m;
					}
				}
				//把创建好的li标签插入到下标为index的数组当中去
				olist[index].appendChild(oli)
				//i第一次循环后  将创建好的第一个li标签闯入到了第一个ul里面去
			}
		}
		fun()
		
			window.onscroll=function(){
			//滚动条顶端到顶部的距离值
			var h=document.documentElement.scrollTop||document.body.scrollTop;
			//div元素的高
			var hei=document.documentElement.offsetHeight;
			//可视区域的高
			var c=document.documentElement.clientHeight;
//			console.log(hei)//1002      1002-969=33
//			console.log(c)//969			
//			console.log(h)//33
			if(h>=(hei-c)){
				fun()
			}
		}
		
		
		
		
	</script>
</html>

效果图
在这里插入图片描述