PHP+JS实现下拉页面查看更多的效果

最近下面当中需要一个下拉页面到底部出发翻页的效果，这个效果的逻辑就是通过监控页面下拉从而出发ajax请求接口获取翻页数据。

前端js代码：

<script type="text/javascript">
	function index(){
		$('.caseud a').css('color','#03a9f4');  //默认值
		setTimeout(" $('.caseud a').css('color','#fF0000')",100); //第一次闪烁
		setTimeout( "$('.caseud a').css('color','#ccc')",200); //第二次闪烁
	};
	var state=true;
	$(window).scroll(function(){
		var bottomsubmit = $('.caseud').offset().top;
		var nowtop = $(document).scrollTop()+$(window).height();
		var now = $('.caseud').attr('now');
		var num = $('.caseud').attr('num');
		if(nowtop>bottomsubmit){
			if(state==true){
				state=false;
				setTimeout(function(){
					now++;
					$('.caseud').attr('now',now);
					$.ajax({
						url:'api.html?page='+$('.caseud').attr('now'),
						type:'GET',
						cache:false,
						dataType: "json",
						beforeSend: function(){
							$('.caseud a').text('加载中...');
							window.setInterval(index, 400);
						},
						success:function(data){
							$.each(data.data,function(i,item){
								$('.timeline-list').append('<hr /><div id="timeline-'+data.data[i].id+'" class="blog-post">'+data.data[i].text+'<p class="timeline-time">发表时间：'+data.data[i].time+'</p></div>');
                             })
                            var $images = $('.docs-pictures');
                            var options = {
                                url: 'data-original',
                                navbar: false,
                                title: false,
                                toolbar: false,
                                loading: true
                            };
                            $images.viewer(options);
							if(now>=num){
								$('.caseud').text('已到底！');
								state=false;
							}else{
								state=true;
							}
						},
						error:function(){
							$('.caseud a').text('加载错误,请刷新页面！');
						}
					});
				},500);
			}
		}
	});
</script>

　　效果截图：

 

 

 demo地址：https://www.changtoulu.com/u/shenmi/timeline/index.html