原生JS瀑布流

最新推荐文章于 2020-10-29 10:35:36 发布

周楚雄

最新推荐文章于 2020-10-29 10:35:36 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/zhouchuxiong/article/details/89637257

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
<style type="text/css">
div{
	width: 200px;
	/*background: #ccc;*/
	position: absolute;
}
</style>
</head>
<body id="body">
</body>
<script type="text/javascript">
function sum(){
	return Math.round(Math.random()*899999+100000)
}
createDiv()
//创建一个新建盒子的函数
function  createDiv(){
	//循环创建20个盒子
	for (var i = 0; i < 20; i++) {
		var aDiv = document.createElement("div")
		//取一个100-300的随机数
		var divH = Math.floor(Math.random()*200+100)
		//把随机数赋给盒子的高
			aDiv.style.height = divH+"px";
			aDiv.style.background = "#"+sum()
			//把盒子插入到body里
			body.appendChild(aDiv)
	}
	change()
}
//创建一个定位函数
function change(){
	//获取窗口的宽度
	var windowCW = document.documentElement.clientWidth;
	//获取窗口宽度可以放几个盒子
	var n = Math.floor(windowCW/(200+10))
	//获取盒子的左边距
	var center = (windowCW - n*(200+10))/2
	//获取所有的盒子
	var div = document.getElementsByTagName("div")
	//新建一个数组
	var arrh = [];
	//循环div的长度
	for (var i = 0; i < div.length; i++) {
		//取第一排的下标
		var j = i%n;
		//判断除了第一排其他盒子
		if (arrh.length==n) {
			//取arrh里最小值的下标
			var min = minIndex(arrh)
			// 设置新盒子的top值
			div[i].style.top = arrh[min]+10+"px"
			//设置新盒子的left值
			div[i].style.left = center+210*min+"px"
			//因为低的地方新加了一个盒子,top值要发生变化,所以要把心盒子的高度累加到他里面
			arrh[min]+=div[i].offsetHeight+10
		}else{
			// 保存第一排div的高度
			arrh[j] = div[i].offsetHeight
			// 第一排div的left值
			div[j].style.left = center+j*(200+10)+"px";
			// 第一排的top值
			div[j].style.top = 0+"px";
		}
	}
}
//创建滚轮事件
window.onscroll=function(){
	//获取窗口高度
	var windowH = document.documentElement.clientHeight;
	//获取滚动条到顶部的距离
	var scrollH = document.documentElement.scrollTop || document.body.scrollTop
	//获取窗口的可见高度
	var documentH = document.documentElement.scrollHeight || document.body.scrollHeight
	//判断窗口高度+滚动条到顶部的距离>窗口可见高度-20
	if (windowH+scrollH>documentH-20) {
		//调用创建div函数
		createDiv()
	}
}
//创建自适应事件
window.onresize=function(){
	//调用定位函数
	change()
}
//创建取数组最小值函数
function minIndex(arr){
	//设置一个变量为0
	var m = 0;
	//循环参数数组长度
	for (var i = 0; i < arr.length; i++) {
		//取出数组的最小值
		m = Math.min(arr[m],arr[i])==arr[m]?m:i
	}
	// 终止函数,返回m
	return m
}
</script>
</html>