js瀑布流实现代码 - Javascript教程_JS教程_技术文章

js瀑布流实现代码

2017-10-24 16:16:11 来源：xxy77721的博客

js瀑布流实现代码

<!DOCTYPE html>
 	<html>
 	<head>
 	<meta charset="UTF-8">
 	<title></title>
 	<style type="text/css">
 	p{
 	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("p");
 	//获取当前p高度最低
 	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>
 	<p id="left"></p>
 	<p id="center"></p>
 	<p id="right"></p>
 	</body>
 	</html>

点击复制链接与好友分享!回本站首页