页面滚动加载内容

发布时间：2020-12-16 02:12:20 所属栏目：百科来源：网络整理

导读：帮同事修改bug 的小函数，不知道起初是谁写的 !doctype htmlhtmlmeta charset="UTF-8"titlephp+jquery+ajax+json简单小例子/titleheadstyle#container {border: 1px solid #999;margin: 10px auto;width: 660px;}.single_item {border-bottom: 1px dotted #

帮同事修改bug 的小函数，不知道起初是谁写的

<!doctype html>
<html>
<meta charset="UTF-8">
<title>php+jquery+ajax+json简单小例子</title>
<head>
<style>
#container {
	border: 1px solid #999;
	margin: 10px auto;
	width: 660px;
}
.single_item {
	border-bottom: 1px dotted #d3d3d3;
	padding: 20px;
}
.author {
	color: #39f;
	font-weight: bold;
	left: 0;
	position: absolute;
}
.date {
	color: #999;
	position: absolute;
	right: 0;
}
.content {
	line-height: 20px;
	word-break: break-all;
}
.element_head {
	height: 20px;
	position: relative;
	width: 100%;
}
.nodata {
	color: #999;
	display: none;
	font-size: 14px;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
</style>
</head>
<body>
<div id="container">
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 16:17</div>
      <div class="author">demo3</div>
    </div>
    <div class="content">上的发生</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 16:17</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">上的发生的</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">dfgdfgdfgdfgdfg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">dfgdfgdfg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo3</div>
    </div>
    <div class="content">dgdfgdfgdfgdg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">fgfdfgdfg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 11:54</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">所发生的</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 23:34</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">寺夺震</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 18:00</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">123456 </div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 18:00</div>
      <div class="author">demo3</div>
    </div>
    <div class="content">这场戏</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 17:18</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">hello</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 11:58</div>
      <div class="author">demo4</div>
    </div>
    <div class="content">就这样长大了 </div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 11:58</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">简简单单的孩子</div>
  </div>
</div>
<div class="nodata"></div>
</body>
</html>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">  
$(function(){ 
	var winH = $(window).height(); //页面可视区域高度 
  //之前这里没有设置文件头<!doc type>  $(window).height()获取到的是文档的高度

	var i = 1; //设置当前页数
	
  var load = true;//此处定义load  防止重复加载. 此处初始化，第一次滚动时即可触发加载
  
  $(window).scroll(function () { 
    var pageH = $(document.body).height(); 
    var scrollT = $(window).scrollTop(); //滚动条top
    var aa = (pageH-winH-scrollT)/winH;

		if(aa<0.02 && load===true){ 
      load = false;   //在该次请求处理完之前load为false，页面的滚动不会加载
			$.getJSON('data.php',{page:i},function(json){ 
				if(json){ 
					var str = ""; 
					$.each(json,function(index,array){ 
						str += "<div class='single_item'><div class='element_head'>"; 
						str += "<div class='date'>"+array['time']+"</div>"; 
						str += "<div class='author'>"+array['name']+"</div>"; 
						str += "</div><div class="content">"+array['name']+"</div></div>"; 
          }); 
						$("#container").append(str);
            load = true;  //当该次请求处理完成后，改变load值为true
					i++;   //+1,此时页面滚动会再次触发加载
					
				}else{ 
          load = false;
					$(".nodata").show().html("别滚动了，已经到底了。。。"); 
					return false; 
				} 
			}); 
		} 
	});
	 
}); 
  
</script>

php

<?php
	function get_data(){
		$page = $_GET['page'] ? $_GET['page'] : 1;
		$page_size = 10;
		$data = array();
		for($i=0;$i<100;$i++){
			$data[] = array('id' => $i,'name'=>'test'.$i,'time'=>@date('Y-m-d H:i:s',time()));
		}
		$res = array_slice($data,($page-1)*$page_size,$page_size);
		$return = empty($res) ? null : $res;
		echo json_encode($return); 
	}
	get_data();

?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!