瀑布流

最新推荐文章于 2024-07-04 12:59:33 发布

Annlilawer

最新推荐文章于 2024-07-04 12:59:33 发布

阅读量317

点赞数

分类专栏： JS 文章标签： JS 瀑布流

本文链接：https://blog.csdn.net/Anlilower/article/details/52662906

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果:

典型的网站：https://www.pinterest.com/

实现代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
div {width:826px;border:1px solid red;margin:0 auto;overflow:hidden;}
ul{width:250px;float:left;border:1px solid red;margin:10px;}
li {list-style:none;background:#ccc;border:1px solid red;font-weight:bold;font-size:50px;}
</style>
<script>
window.onload = function ()
{
	var aTmp = document.getElementsByTagName('ul');
	var aUl = [];
	var bFlag = 0;
	for (var i=0;i<aTmp.length;i++) {
		aUl.push(aTmp[i]);
	}
	createLi();
	//var clientHeight = document.body.clientHeight;
	window.onscroll = function ()
	{
		//获取可视区高度
		var clientHeight = document.documentElement.clientHeight;
		//获取滚动距离
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		//获取最大滚动距离
		var maxTop = document.body.scrollHeight;
		console.log(clientHeight + scrollTop);
		console.log(maxTop);
		if ((clientHeight + scrollTop) >= (maxTop-50)) 
		{
			createLi();
		}	
	}
	function createLi()
	{
		
		var sColor = ['yellow','#f90','#ccc','blue','pink'];
	
		if (bFlag >= 5)
		{
			return;
		}
		for (var i=0;i<20;i++) {
			var oLi = document.createElement('li');
			var oHeight = rand(100,300)+'px';
			oLi.style.height = oHeight;
			oLi.style.lineHeight = oHeight;
			oLi.innerHTML = i;
			oLi.style.background = sColor[bFlag];
			oLi.style.textAlign = 'center';
			aUl.sort(function(val1,val2){
				return val1.offsetHeight - val2.offsetHeight;
			});
			aUl[0].appendChild(oLi);
		}	
		bFlag++;
	}
	
	function rand(n,m)
	{
		//
		return Math.floor(Math.random()*(m-n)+n);
	}
}
</script>
</head>

<body>
	<div>
    	<ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
</body>
</html>