/**
* 需求:
* 1、页面加载完成后 请求服务器 获取第一屏的数据
* 2、点击加载更多 请求服务器 获取下一屏的数据
* 3、当页面滚动到一定的高度时 请求服务器 获取下一屏的数据 渲染在页面中
*/
一、html代码
<div class="wrapper"> <div class="items"> </div> <p class="tips">加载更多</p> </div>
<!-- 引入jquery插件 --> <script src="js/jquery.min.js"></script> <!-- 引入封装好的瀑布流插件 --> <script src="js/jquery.waterFall.js"></script> <!-- 引入模板引擎 --> <script src="js/template-native.js"></script>
二、js代码
<script> /** * 需求: * 1、页面加载完成后 请求服务器 获取第一屏的数据 * 2、点击加载更多 请求服务器 获取下一屏的数据 * 3、当页面滚动到一定的高度时 请求服务器 获取下一屏的数据 渲染在页面中 */ $(function () { //由于需要多次调用$.ajax 方法 多次请求服务器 所以可以封装一个请求服务器的方法 //index 表示: 要获取数据的页码 function getData(index) { $.ajax({ type:'post', url:'data.php', data:{page:index}, dataType:'json', beforeSend:function () { //请求发送之前回调函数 //如果正在请求 下次点击无效的 if($('.tips').hasClass('loading')){ return false; } //请求发送前改变按钮的样式 $('.tips').addClass('loading').text('正在加载...'); }, success:function (info) { //请求成功返回 //准备数据 //准备模板 //组装数据、模板 var html = template('tmp',info); //追加到页面中 $('.items').append(html); //使用瀑布流插件进行布局 $('.items').waterFall(); //缓存下一页 页码 $('.tips').attr('data-page',info.page); }, error:function () { //请求出错回调函数 }, complete:function () { //请求完成时调用 //加载完成 按钮样式恢复 $('.tips').removeClass('loading').text('加载更多'); } }); } //调用函数 getData(1); //第二个需求 点击按钮加载下一页 $('.tips').click(function () { //需要获取下一页的页码 var page = $(this).attr('data-page'); //调用函数 getData(page); }); //第三个需求 当页面距离底部一定距离时 加载下一屏内容 $(window).scroll(function () { //获取需要的宽高 // 底部的距离 = $(items).height+$(items).offset().top-$(window).scrollTop-$(window).height(); var wHeight = $(window).height(); var scrollTop = $(window).scrollTop(); var iHeight = $('.items').height(); var iTop = $('.items').offset().top; var top = iHeight + iTop - wHeight - scrollTop; //当items 距离浏览器底部的距离小于 100时 开始加载下一屏内容 if(top<100){ //获取下一页页码 var page = $('.tips').attr('data-page'); //调用函数 getData(page); } }); }) </script>
三、模板引擎
<script type="text/template" id="tmp"> <% for(var i=0;i<items.length;i++){ %> <div class="item"> <img src="<%=%20items[i].path%20%>" alt=""> <p><%= items[i].text %></p> </div> <% } %> </script>
四、php模拟数据库部分
<?php header('Content-Type:application/json; charset=utf-8'); // 读取json数据 // 正常工作中是从数据库里取的 $data = file_get_contents('./data.json'); // 转换成PHP数组 $data = json_decode($data); // 根据页码计算offset $page = $_POST['page']; // 每页10条 // 1 0-9 // 2 10-19 // 3 20-29 // 4 30-39 // (page - 1) * 10 计算得到每一页的第1条数据 // 每页的数据计算每页数据的"起点"" $offset = ($page - 1) * 10; // 从数组取出一部分数据 // 截取10条数据 $result = array_slice($data, $offset, 10); // 翻页 $page++; // 放到数级组里 $arr = array ( 'page'=> $page, 'items'=>$result ); echo json_encode($arr); // echo json_encode(array('page'=>$page, 'items'=>$result)); sleep(1); ?>

我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏