瀑布流效果源码

最新推荐文章于 2023-11-25 13:32:48 发布

weixin_33843947

最新推荐文章于 2023-11-25 13:32:48 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/20789

版权

<!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.οnlοad=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.οnscrοll=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>