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

一,问题描述


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

二,效果预览


Html+Css+Js瀑布流式的不断加载数据(完整代码+详解)_第1张图片

三,用到的主要事件


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

四,完整代码


  • 代码结构
    Html+Css+Js瀑布流式的不断加载数据(完整代码+详解)_第2张图片
  • 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;
	}
}

五,效果演示


Html+Css+Js瀑布流式的不断加载数据(完整代码+详解)_第3张图片

你可能感兴趣的:(案例详解,步步进心,Html,JavaScript,Css,读卷有益)