页面滚动加载内容

来源：互联网发布：鹊桥与淘宝联盟的使用编辑：程序博客网时间：2024/04/27 18:48

帮同事修改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值为truei++;   //+1,此时页面滚动会再次触发加载}else{           load = false;$(".nodata").show().html("别滚动了，已经到底了。。。"); return false; } }); } }); });   </script>

php

<?phpfunction 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();?>

0 0