jq滚动到底部自动加载数据实例-幸凡学习网

jq滚动到底部自动加载数据实例

关注我吧

2015/8/15 20:57:50 阅读次数:19579Tags:jq 手机滚动加载

一、功能描述：

滚动下拉到页面底部加载数据是很多瀑布流网站的做法，本实例是固定数据，小菜总结记录之用，高手勿喷。

首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的 height，jquery如下代码:

$(window).scrollTop()+$(window).height()>=$(document).height();

再给window绑定scroll事件来实现加载数据显示。

本实例的主要是提供手机版使用所以使用了CSS3的旋转模拟图片加载效果。

在实例中实现了自动判断是否已经具备滚动事件的条件，如果高度不足自动补充下一页，直接满足滚动事件能有效执行，如果已经加载完所有内容，就提示：【Duang～到底了】

二、效果图如下：

jq滚动到底部自动加载数据实例

三、源代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>jq滚动到底部自动加载|幸凡学习网</title>

<style>
		html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}
		body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;font-size:16px;color:#333;}
		ol,ul{list-style:none;}
		a{text-decoration:none;}
		body{background:#f2f2f2;}
		.prolist li{height:50px;line-height:50px;border-bottom:1px solid #f8f8f8;background:#fff;padding:0 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
		.prolist li a{color:#333;font-size:16px;}
		
		/**加载效果旋转**/
		@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
		@keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
		
		.loadmore {display:block;line-height: 50px;text-align:center;color:#ccc;font-size:14px;}
		.loadmore span{height:20px;width:20px;border-radius:100%;display:inline-block;margin:10px;border:2px solid #f60;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 1.1s infinite linear;animation: rotate 1.1s infinite linear;}
		.loadover{position:relative;margin:0 12px;padding:24px 0;height:20px;line-height:20px;color:#909090;text-align: center;}
		.loadover span{position:relative;display:inline-block;padding:0 6px;height:20px;background:#F2F2F2;z-index:2}
		.loadover:after {content:''position: absolute;left: 0;top:50%;width: 100%;height:1px;background:#DCDCDC;z-index:1;display:block;}
	</style>
</head>
<body>
<!-- 产品列表 开始-->
<ul class="prolist">
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
</ul>
<!-- 产品列表 结束 -->

<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script>
<script>
var page=1;
var finished=0;
var sover=0;

//如果屏幕未到整屏自动加载下一页补满
var setdefult=setInterval(function (){
	if(sover==1)
		clearInterval(setdefult);	
	else if($(".prolist").height()<$(window).height())
		loadmore($(window));
	else
		clearInterval(setdefult);
},500);

//加载完
function loadover(){
	if(sover==1)
	{	
		var overtext="Duang～到底了";
		$(".loadmore").remove();
		if($(".loadover").length>0)
		{
			$(".loadover span").eq(0).html(overtext);
		}
		else
		{
			var txt='<div class="loadover"><span>'+overtext+'</span></div>'
			$("body").append(txt);
		}
	}
}

//加载更多
var vid=0;
function loadmore(obj){
	if(finished==0 && sover==0)
	{
		var scrollTop = $(obj).scrollTop();
		var scrollHeight = $(document).height();
		var windowHeight = $(obj).height();
		
		if($(".loadmore").length==0)
		{
			var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'
			$("body").append(txt);
		}
		
		if (scrollTop + windowHeight -scrollHeight<=50 ) {
			//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
			
			
			//防止未加载完再次执行
			finished=1;
			
			var result = "";
			for(var i = 0; i < 6; i++){
				vid++;
				result+='<li>'
							+'<a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！'+parseInt(vid)+'</a>'
						+'</li>'
			}
			setTimeout(function(){
				//$(".loadmore").remove();
				$('.prolist').append(result);
				page+=1;
				finished=0;
				//最后一页
				if(page==10)
				{
					sover=1;
					loadover();
				}
			},1000);
			/*$.ajax({
				type: 'GET',
				url: 'json/more.json?t=25&page='+page,
				dataType: 'json',
				success: function(data){
					if(data=="")
					{
						sover = 1;
						loadover();						
						if (page == 1) {
							$("#no_msg").removeClass("hidden");
							$(".loadover").remove();
						}
					}
					else
					{
						var result = ''
						for(var i = 0; i < data.lists.length; i++){
							result+='<li>'
										+'<a href="'+data.lists[i].link+'">'+data.lists[i].title+parseInt(page+1)+"-"+i+'</a>'
									+'</li>'
						}
						
						// 为了测试，延迟1秒加载
						setTimeout(function(){
							$(".loadmore").remove();
							$('.prolist').append(result);
							page+=1;
							finished=0;
							//最后一页
							if(page==10)
							{
								sover=1;
								loadover();
							}
						},1000);
					}
				},
				error: function(xhr, type){
					alert('Ajax error!');
				}
			});*/
		}
	}
}
//页面滚动执行事件
$(window).scroll(function (){
	loadmore($(this));
});
</script>
</body>
</html>

DEMO地址：http://www.86y.org/demo/jqscroll/(建议使用手机打开效果更佳)
在线二维码生成器