Html+Css+Js瀑布流式的不断加载数据（完整代码+详解）

最新推荐文章于 2020-06-28 10:54:06 发布

lucksoul

最新推荐文章于 2020-06-28 10:54:06 发布

阅读量2.4k

点赞数 1

分类专栏：案例详解步步进心 Html JavaScript Css 读卷有益文章标签：自动加载数据瀑布流

本文链接：https://blog.csdn.net/qq_38170526/article/details/98228043

版权

案例详解同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

步步进心

8 篇文章 0 订阅

订阅专栏

Html

8 篇文章 0 订阅

订阅专栏

一，问题描述

页面的数据浏览完后是需要加载的，当浏览到页面底部时，没有了内容，滚动滚动条就会自动加载后面的数据。

二，效果预览

在这里插入图片描述

三，用到的主要事件

window.onload：页面加载事件
window.onscroll：滚动条滚动事件

四，完整代码

代码结构
Html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/autoAdd.css"/>
	<script type="text/javascript" src="../js/autoAdd.js" charset="UTF-8" ></script>
	<body>
		<div id="all">
			<div >
				1
			</div>
			
			
		</div>
	</body>
</html>

Css代码

*{
	padding: 0px;
	margin: 0px;
}
#all{
	width: 600px;
	margin: 0 auto;
	text-align: center;
	border: 1px solid red;
	position: relative;
}
#all div{
	/*top: 20px;*/
	width: 200px;
	height: 100px;
	border: 1px solid blue;
	margin: 10px 34%;
	text-align: center;
	position: absolute;
}

Js上代码

window.onload=function(){
	all=document.getElementById("all");
	getData;//注意不能置为null
	num=1;
	var lis=all.getElementsByTagName("div");
//	var lastDiv=lis[lis.length-1];
//	console.log(lastDiv);
//	console.log(getData);
//	console.log(getData.eleT(lastDiv).y);
//	console.log(getData.scrollT().y);
//	console.log(getData.clientH().y);
	/**
	 * 最好是每进行一步就进行验证，否则很难找到问题所在
	 */
}

window.onscroll=function(){
		Add();
	}
function Add(){
	if(isCheckAdd()){
		var newDiv=document.createElement("div");
		newDiv.innerHTML=num+1;
		newDiv.style.top=num*(120)+"px";
		num++;
		all.appendChild(newDiv);
	}
		
		

}



function isCheckAdd(){
	var lis=all.getElementsByTagName("div");
	console.log("length="+lis.length)
	var lastDiv=lis[lis.length-1];
	console.log("lastDiv的Top="+document.defaultView.getComputedStyle(lastDiv,null).top);
	return (getData.eleT(lastDiv).y<=getData.scrollT().y+getData.clientH().y)?true:false;
}

getData={
	
	/**
	 * 
	 * @param {Object} obj
	 * 获取all最后一个元素的top和他自身的一半高度
	 */
	eleT:function(obj){//最好用？而不是用||
		var marginTop=obj.style.top?
		obj.style.top:document.defaultView.getComputedStyle(obj,null).marginTop;
		marginTop=parseInt(marginTop);
		console.log("marginTop="+marginTop)
		var height=obj.style.height||document.defaultView.getComputedStyle(obj,null).height;
		height=parseInt(height);
		console.log("height="+height)
		var halfH=Math.ceil(height/2);
		var eleT=marginTop+halfH;
		
		return new this.result(parseInt(eleT));
	}
	,
	/**
	 * 获取滚动条的top
	 */
	scrollT:function(){
		var scrollT=document.documentElement.scrollTop?
		document.documentElement.scrollTop:document.body.scrollTop;
		
		var scrollL=document.documentElement.scrollLeft?
		document.documentElement.scrollLeft:document.body.scrollLeft;
		
		console.log("scrollT="+scrollT+" :  scrollL="+scrollL);
		return new this.result(scrollT);
	},
	/**
	 * 获取浏览器的可见区域的height
	 */
	clientH:function(){
		var clientH=document.documentElement.clientHeight;
		console.log("clientH="+clientH);
		return new this.result(clientH);
	},
	result:function(y){
	this.y=y;
	}
}

五，效果演示

在这里插入图片描述

lucksoul

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Html+Css+Js瀑布流式的不断加载数据（完整代码+详解）

一，问题描述页面的数据浏览完后是需要加载的，当浏览到页面底部时，没有了内容，滚动滚动条就会自动加载后面的数据。二，效果预览三，用到的主要事件window.onload：页面加载事件window.onscroll：滚动条滚动事件四，完整代码代码结构Html代码<!DOCTYPE html><html> <head> ...
复制链接

扫一扫

专栏目录