JS实现页面下拉动态加载

最新推荐文章于 2021-01-19 11:22:16 发布

四根毛

最新推荐文章于 2021-01-19 11:22:16 发布

阅读量3.6k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<style type="text/css">
.big{width:600px;height:100px;border:solid 2px ;}
.bottom{width:600px;height:50px;border:solid 2px red;}	
.add{width:600px;height:300px;border:solid 2px blue;}
</style>
<div id="content">
<div id="scroll">aaa</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
<div class="big">
 这是一个测试DIV
</div>
</div>
<div id="bottom" class="bottom">这是底部</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
run_interval = setInterval(function(){
	var offHeight = $("#bottom").offset().top,
		windowHeight = $(window).height(),
		scrollHeight = $(document).scrollTop(),
		html = '<div class="add"> 这是一个后来加de测试DIV</div>';
		var	sumHeight = scrollHeight + windowHeight+30;
		if(sumHeight > offHeight)
		{
			$("#content").append(html);
		}
},1000);
});
</script>