js瀑布流

最新推荐文章于 2023-12-26 15:09:23 发布

xxy77721

最新推荐文章于 2023-12-26 15:09:23 发布

阅读量283

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xxy77721/article/details/78323204

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	div{
	float: left;
	display: flex;
	flex-direction: column;
	margin: 10px 10px;
	}
	img{
	width: 200px;
	padding-top: 10px;
	}
	</style>
	<script type="text/javascript">
	window.onload = function (){
	//获取页面标签
	var oDiv = document.getElementsByTagName("div");
	//获取当前div高度最低
	function minDiv(){
	var min = 0;
	for(var i = 0; i < oDiv.length; i ++){
	if(oDiv[i].offsetHeight < oDiv[min].offsetHeight){
	min = i;
	}
	}
	return min;
	}
	//添加图片
	function addPic(){
	for(var i = 0 ; i < 16 ; i ++){
	var oImg = document.createElement("img");
	oImg.src = "images/" + Math.floor(Math.random() * 56 + 1) + ".jpg";
	oDiv[minDiv()].appendChild(oImg);
	}
	}
	addPic();
	//进行边界处理
	//滚动条高度页面内容实际高度可视区域胡高度
	// 页面内容实际0.7时就需要下一次添加
	document.onscroll = function(){
	//滚动条高度，代表已经浏览过隐藏在上方的高度
	var sp = document.documentElement.scrollTop \|\| document.body.scrollTop;
	//可视区域高度
	var view = document.documentElement.clientHeight;
	//页面内容实际高度（包括下方未见内容）
	var all = document.documentElement.offsetHeight;
	//alert("sp:" + sp + "view" + view + "all" + all);
	if(sp + view >= 1 * all){
	addPic();
	}
	};
	};
	</script>
	</head>
	<body>
	<div id="left"></div>
	<div id="center"></div>
	<div id="right"></div>
	</body>
	</html>