黑马程序员技术交流社区

标题: 【广州PHP】瀑布流下拉加载更多 [打印本页]
作者: mangoboy    时间: 2018-11-12 00:03
标题: 【广州PHP】瀑布流下拉加载更多
本帖最后由 mangoboy 于 2018-11-12 00:07 编辑

html模板核心代码:
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>

<html lang="en">

<meta charset="UTF-8">

<style>

  ul {

    margin: 0 auto;

    padding: 0;

    width: 300px;

    list-style: none;

  }



  li {

    height: 200px;

  }



  .lazy {

    margin-bottom: 100px;

    width: 300px;

    height: 168px;

    text-align: center;

    line-height: 168px; /*垂直居中*/

  }



    

</style>

<body style="margin: 0 auto;width: 60%;">

  <div>



     <ul id="loading">

    </ul>

    <!-- 记录当前页码 -->

    <input id="page" type="hidden" value="1">

   <ul>

     <li><span id="res" style="color:red;"></span></li>

   </ul>

  </div>

</body>        

</html>

js核心代码如下:
[JavaScript] 纯文本查看 复制代码
<!-- 引入jQuery -->

<!-- 替换成你的本地jquery的路径 -->

<script src="/publc/jquery.min.js"></script>

<script>

$(function() {

  // 初始化，加载第一页数据

  init();

  // 开始编写下啦加载代码啦

  // 第一步 定义stop变量控制是否继续加载

  var stop = true; 



  $(window).scroll(function(){  

      // 第二步 当滚动条离底部100px时开始加载下一页的内容

      if( (parseInt($(window).height()) + parseInt($(window).scrollTop()) + 100) >= parseInt($(document).height())){

          if(stop==true){ 

              stop=false;

              // 第三步 获取当前页码 

              var page = parseInt($("#page").val()) ? parseInt($("#page").val()) : 1;

              // 第四步 下一页

              var page  = page+1;

              // 第五步 发起ajax请求到后台获取数据

              $.post("postdata.php", {page:page},function(res){ 

                  // 第六步 判断后台是否有数据 

                  if (res['code'] > 0) {

                    var html = '';

                    var data = res['data'];

                    for (var i in data) {

                      html += '<li>姓名：'+data['name']+'|年龄:'+data['age']+'岁</li>';

                    }

                    $("#loading").append(html); 

                    $("#page").val(page);

                    stop=true; 

                  } else {

                    // 已经加载完毕，不让再调用ajax

                    stop=false; 

                  }

              },"json"); 

          } else {

            stop=false; 

            $("#res").html("已经加载完毕~~~~~~");  

          }

      } 

  });

//   初始化第一次加载的数据

  function init()

  {

    var page = $("#page").val() ? $("#page").val() : 1;

    // 第一步 发起ajax请求到后台获取数据

    $.post("postdata.php", {page:page},function(res){ 

        //  第二步 判断后台是否有数据 

        if (res['code'] > 0) {

          var html = '';

          var data = res['data'];

          for (var i in data) {

            html += '<li>姓名：'+data['name']+'|年龄:'+data['age']+'岁</li>';

          }

          $("#loading").append(html); 

          $("#page").val(res.page);

          stop=true; 

        } else {

          stop=false; 

          $("#res").html("已经加载完毕~~~~~~"); 

        }

    },"json"); 

  }

});

</script>


服务器端核心代码:
<?php
        // 模拟数据库查询的数据
        $arr = [
                ['name' => '张三', 'age' => 11],['name' => '李四', 'age' => 12],['name' => '王五', 'age' => 13],
                ['name' => '马六', 'age' => 14],['name' => '田七', 'age' => 15],['name' => '八哥', 'age' => 16],
                ['name' => '九妹', 'age' => 17],['name' => '石头', 'age' => 18],['name' => '十一姐', 'age' => 19],
                ['name' => '诸葛亮', 'age' => 20],['name' => '亚瑟', 'age' => 21],['name' => '项羽', 'age' => 22],
                ['name' => '安琪拉', 'age' => 23],['name' => '甄姬', 'age' => 24],['name' => '后羿', 'age' => 25],
                ['name' => '剑圣', 'age' => 26],['name' => '皇子', 'age' => 27],['name' => '狐狸', 'age' => 28],
                ['name' => '妲己', 'age' => 29],['name' => '影流之主', 'age' => 30],['name' => '剑豪', 'age' => 31]

        ];
        // 获取当前的页码，因为我的用的php版本是7.0+，7.0以下用$page = $_POST['page'] ？ $_POST['page'] ： 1;
        $page = $_POST['page'] ?? 1;
        // 每页显示10条
        $size = 10;
        // 判断要查询的数据的开始下标
        $start = ($page-1)*$size;
        // 初始化要返回的数据
        $res = [
                'code' => -1,
                'data' => [],
                'page' => $page,
        ];
        if ($start < count($arr)) {
                // 根据下标截取数据的部分，模拟我们查询到的数据库数据
                $res['code'] = 200;
                $res['data'] = array_slice($arr,$start,$size); // 此段代码表示从$arr数组中从第$start个开始，取$size个值；
        }
        // 按页码返回对应的图片数据
        echo json_encode($res);exit;

?>



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2