瀑布流效果源码

最新推荐文章于 2020-03-05 20:48:40 发布

原创最新推荐文章于 2020-03-05 20:48:40 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

web前端学习专栏收录该内容

301 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的动态网页布局方案，该方案能够根据浏览器滚动位置自动加载带有随机高度和背景颜色的列表项，并通过简单的算法确保新元素被添加到当前最短的列中以保持布局美观。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#box{width: 888px; margin:0 auto; overflow: hidden;}
ul{width:200px; border:1px solid red; float: left; margin:10px;}
ul li{ width:200px; height:150px; background:#ccc; margin:10px 0;}
</style>
<script type="text/javascript">
function rnd(n,m){
	return parseInt(n+Math.random()*(m-n));
}
function createLi(){
	var oLi = document.createElement('li');
	oLi.style.height=rnd(150,301)+'px';
	oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
	return oLi;
}


window.onload=function(){
	var oBox = document.body.children[0];
	var aUl = oBox.children;
	function createLi20(){
		for(var i=0;i<20;i++){
			var oLi = createLi();
			var arr = [];
			for(var j=0;j<aUl.length;j++){
				arr.push(aUl[j]);
			}
			arr.sort(function(u1,u2){
				return u1.offsetHeight-u2.offsetHeight;
			});
			arr[0].appendChild(oLi);
		}
	}
	createLi20();
	window.onscroll=function(){
		var scrollT = document.documentElement.scorllTop||document.body.scrollTop;
		var winH = document.documentElement.clientHeight;
		var scrollBottom = scrollT+winH;
		if(scrollBottom>=document.body.scrollHeight-500){
			createLi20();
		}
	};
};
</script>
</head>
<body>
<div id="box">
	<ul></ul>
	<ul></ul>
	<ul></ul>
    <ul></ul>
</div>	
</body>
</html>