频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
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>

 

点击复制链接 与好友分享!回本站首页
上一篇:AngularJS实现模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
下一篇:简单了解JavaScript历史
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站