纯代码编写拖动加载

iscroll 功能强大，也只能在手机下面用。pc只能模仿个差不多的东西。

不过iscroll的东西，只能在单独的页面好用，如果添加太多东西，得到的效果和付出的代价划不来，只能手动编写一个。支持手机pc，因为是纯jq，没有兼容问题

<div class='indexList'>
	<!-- 数据集合 -->
</div>
<!-- 用于放置底部，当滚动条超过这个时，触发相关动作，实现拖动加载，手机本身有滚动特效，同样以滚动条滚动做为媒介 -->
<div id="gd_iscroll_bottom"
	style="height: 25px; font-size: 16px; visibility: hidden; overflow: hidden; width: 100%; text-align: center;">
	下拉加载更多</div>

	//仿php时间函数
	function time() {
		return Math.floor(new Date().getTime() / 1000);
	}
	//分页的索引页面
	var shop_page_index = 1;
	//滚动的记录时间，用来识别滚动时间，当停止滚动时触发对应函数
	var is_on_scroll_time = 0;
	//加载数据已经结束
	//当数据加载结束，不进行二次加载
	var is_load_end = 0;
	//用于触摸设备，判断是否触摸和离开，离开状态下才进行数据加载
	var is_mobile_touch = false;
	setInterval(function() {
                //时间阀值,当滚动触发时，超过3秒，则表示用户停止滚动，触发对应的加载事件
		if (!is_mobile_touch && is_on_scroll_time
				&& is_on_scroll_time - time() <= 3) {
			console.log('is stop');
			is_on_scroll_time = 0;
			$('#gd_iscroll_bottom').html('加载中...');
			//停止动画链表执行
			$('body').stop(true);
			//调用目标地址加载数据
			$.post('xxxxxx', {
				page : shop_page_index
			}, function(result) {
				var htmlstr = '';
				for (i = 0; i < result.length; i++) {
					model = result[i];
					//拼接数据
					$('.indexList').append('xxx');
				}
				//当返回为空时，不进行数据触发和加载
				if (result.length == 0) {
					$('#gd_iscroll_bottom').html('暂无更多数据...');
					$('body')
							.animate(
									{
										scrollTop : $('#gd_iscroll_bottom')
												.offset().top
												- $(window).height()
									}, 1200);
				} else {
					shop_page_index++;
				}
				//$('.indexList').append($('.indexList').html());
				//$('body').animate({scrollTop:$('#gd_iscroll_bottom').offset().top-$(window).height()}, 1200);
			}, 'json');
		}
	}, 1000);
	$(document)
			.ready(
					function() {
						$(window)
								.scroll(
										function() {
											//滚动条超过底部加载条时，记录
											if ($(window).height()
													+ $(window).scrollTop() >= $(
													'#gd_iscroll_bottom')
													.offset().top
													+ $('#gd_iscroll_bottom')
															.height()) {
												//记录当前滚动时间，用于判断用户是否停止鼠标滚动
												is_on_scroll_time = time();
												console
														.log('gd event on bottom');
												$('body').stop(true);
												//$('body').animate({scrollTop:$('#gd_iscroll_bottom').offset().top-$(window).height()}, 800)
											} else if ($(window).height()
													+ $(window).scrollTop() < $(
													'#gd_iscroll_bottom')
													.offset().top) {
												//当用户滚动到底部，又直接往上拖动时，停止相关触发，否则当上拉时，动画会自动往下拖动
												is_on_scroll_time = 0;
												//停止页面滚动特效
												$('body').stop(true);
											}
										});
					});
	//手机触摸相关触发
	function load() {
		document.addEventListener('touchstart', touch, false);
		document.addEventListener('touchmove', touch, false);
		document.addEventListener('touchend', touch, false);
		function touch(event) {
			var event = event || window.event;
			switch (event.type) {
			case "touchstart"://用户触摸中
				is_mobile_touch = true;
				break;
			case "touchend":
				//用户释放
				is_mobile_touch = false;
				break;
			case "touchmove":
				//event.preventDefault();
				break;
			}

		}
	}
	try {
		window.addEventListener('load', load, false);
	} catch (e) {
		//不是手机
	}