jQuery入门(六)jQuery实现瀑布流分页案例

        一、瀑布流分页案例分析

        1.1)  功能分析:

鼠标下拉,加载分页数据(10条) ,如下图:

案例分析:

        1.2)  如何确定当前显示的数据已经浏览完毕?

        公式:(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度
        举例:
- 当前文档高度:存储10条数据,100px。
- 滚动条距底部的距离:1px。
- 当前窗口的高度:80px。
- 滚动条上下滚动的距离:>=19px。

        因为文档高度不确定,不能只判断 滚动条上下滚动的距离大于等于19px。即要判断: 滚动条距底部的距离1px+当前窗口的高度80px +滚动条上下滚动的距离19px >=当前文档的高度。


        1.3)  前置知识点:

         $(function(){})  页面加载事件
         $(window)       获取当前窗口对象
         scroll()            鼠标滚动事件
         $(window).height()       当前窗口的高度
         $(window).scrollTop()        滚动条上下滚动的距离
         $(document).height()        当前文档高度

二、实现思路和代码


  
 2.1)页面实现思路:

        1. 定义发送请求标记。(控制是否发起请求,如果当前处于请求状态,就不能再去发请求,只有在请求完毕才能重新发起请求,类似于多线程里的等待唤醒机制)
        2. 定义当前页码和每页显示的条数。 (分页必备的两个参数)
        3. 定义滚动条距底部的距离。(可以设置固定值1就可以)
        4. 设置页面加载事件。(事件里完成后续功能)
        5. 为当前窗口绑定滚动条滚动事件。()
        6. 获取必要信息(当前窗口的高度,滚动条上下滚动的距离,当前文档的高度)。
        7. 计算当前展示数据是否浏览完毕。(浏览完毕需要发起请求)
        8. 判断请求标记是否为 true。
        9. 为true,将请求标记置为 false,当前异步操作完成前,不能重新发起请求。 
        10. 根据当前页和每页显示的条数来请求查询分页数据。
        11. 当前页码+1。

页面和代码:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网站首页</title><link rel="stylesheet" href="css/tt.css">
</head>
<body>
<div class="top"><span class="top-left">下载APP</span><span class="top-left"> 北京         晴天</span><span class="top-right">更多产品</span>
</div><div class="container"><div class="left"><a><img src="img/logo.png"><br/></a><ul><li><a class="channel-item active" href="#"><span>推荐</span></a></li><li><a class="channel-item" href="#"><span>视频</span></a></li><li><a class="channel-item" href="#"><span>热点</span></a></li><li><a class="channel-item" href="#"><span>直播</span></a></li><li><a class="channel-item" href="#"><span>图片</span></a></li><li><a class="channel-item" href="#"><span>娱乐</span></a></li><li><a class="channel-item" href="#"><span>游戏</span></a></li><li><a class="channel-item" href="#"><span>体育</span></a></li></ul></div><div class="center"><ul class="news_list"><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !1<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !2<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !3<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !4<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !5<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !6<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !7<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !8<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !9<hr></a></div></li><li><div class="title-box"><a href="#" class="link">这里是内容 !这里是内容 !这里是内容 !这里是内容 !这里是内容 !10<hr></a></div></li></ul><div class="loading" style="text-align: center; height: 80px"><img src="img/loading2.gif" height="100%"></div><div class="content"><div class="pagination-holder clearfix"><div id="light-pagination" class="pagination"></div></div></div><div id="no" style="text-align: center;color: red;font-size: 20px"></div></div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//1.定义发送请求标记let send = true;//2.定义当前页码和每页显示的条数let start = 1;let pageSize = 10;//3.定义滚动条距底部的距离let bottom = 1;//px//4.设置页面加载事件$(function () {//5.为当前窗口绑定滚动条滚动事件$(window).scroll(function () {//6.获取必要信息,用于计算当前展示数据是否浏览完毕//当前窗口的高度let windowHeight = $(window).height();//滚动条从上到下滚动距离let scrollTop = $(window).scrollTop();//当前文档的高度let docHeight = $(document).height();//7.计算当前展示数据是否浏览完毕//当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度if((bottom + scrollTop + windowHeight) >= docHeight) {//8.判断请求标记是否为trueif(send == true) {//9.将请求标记置为false,当前异步操作完成前,不能重新发起请求。send = false;//10.根据当前页和每页显示的条数来 请求查询分页数据queryByPage(start,pageSize);//11.当前页码+1start++;}}});});//定义查询分页数据的函数function queryByPage(start,pageSize){//加载动图显示$(".loading").show();//发起AJAX请求$.ajax({//请求的资源路径url:"newsServlet",//请求的参数data:{"start":start,"pageSize":pageSize},//请求的方式type:"POST",//响应数据形式dataType:"json",//请求成功后的回调函数success:function (data) {if(data.length == 0) {$(".loading").hide();$("#no").html("加载完毕...");return;}//加载动图隐藏$(".loading").hide();//将数据显示let titles = "";for(let i = 0; i < data.length; i++) {titles += "<li>\n" +"                <div class=\"title-box\">\n" +"                    <a href=\"#\" class=\"link\">\n" +data[i].title +"                        <hr>\n" +"                    </a>\n" +"                </div>\n" +"            </li>";}//显示到页面$(".news_list").append(titles);//将请求标记设置为truesend = true;}});}</script>
</html>

 2.2)服务器实现思路:

1. 获取请求参数(当前页,每页显示的条数)。
2. 根据当前页码和每页显示的条数,调用业务层的方法,得到分页 Page 对象。
3. 将得到的数据转为 json。
4. 将数据响应给客户端。

服务器代码:

public class NewsServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的编码req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//1.获取请求参数String start = req.getParameter("start");String pageSize = req.getParameter("pageSize");//2.根据当前页码和每页显示的条数来调用业务层的查询方法,得到分页Page对象Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));//3.将得到的数据转为JSONString json = new ObjectMapper().writeValueAsString(page);try {Thread.sleep(1000);} catch (InterruptedException e) {e.printStackTrace();}//4.将数据响应给客户端resp.getWriter().write(json);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}
}

成功实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/414919.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Echarts中国地图省市区县三级联动

NodeV14.20.0安装 # 历史版本Node下载地址 https://nodejs.org/en/download/prebuilt-installer# NodeV14.20.0配置与部署 https://nodejs.org/dist/v14.20.0/node-v14.20.0-x64.msi构建默认Vue3工程目录 npm install -g vue/cli --registryhttps://registry.npm.taobao.org …

22. K8S及DevOps

22. K8S及DevOps 一. 章节简介二. DevOps1. 简介2. CICD三. Kubernetes1. [官网](https://kubernetes.io/zh-cn/)2. K8S安装2.1 服务器要求2.2 准备工作演示服务器IP主副服务器设置`hostnamectl`设置host与ip绑定关闭防火墙时间同步关闭selinux安全策略关闭swap分区网桥过滤与地…

SAPUI5基础知识25 - 聚合绑定(Aggregation Binding)

1. 背景 Aggregation Binding 是 SAPUI5 中的一种数据绑定方式&#xff0c;用于将数据模型中的集合&#xff08;如数组&#xff09;绑定到 UI 控件的聚合&#xff08;如列表项、表格行等&#xff09;。 常见的场景包括将一个数组绑定到 sap.m.List 的 items 聚合&#xff0c;…

人脸静态活体检测(高精度版) API 对接说明

人脸静态活体检测&#xff08;高精度版&#xff09; API 对接说明 本文将介绍人脸静态活体检测&#xff08;高精度版&#xff09;API 对接说明&#xff0c;它可用于对用户上传的静态图片进行防翻拍活体检测&#xff0c;以判断是否是翻拍图片。 接下来介绍下 人脸静态活体检测…

yolo8 目标检测、鉴黄

省流 看前必读 别浪费时间 &#xff1a;本文只是一个记录&#xff0c;防止自己下次被改需求时浪费时间&#xff0c;在这里就随意的写了一下文章记录整个步骤&#xff0c;但是文章想必肯定没有对应的教程讲的详细&#xff0c;该文章只适合想要快速按照步骤完成一个简单的 demo 的…

【Next.js 入门指南】5分钟创建你的第一个 Next.js 应用

你是否曾经梦想过构建一个快速、高效且 SEO 友好的 React 应用&#xff1f;今天&#xff0c;我们将一起探索 Next.js —— 一个革命性的 React 框架&#xff0c;它将帮助你轻松实现这个梦想。在接下来的 5 分钟里&#xff0c;你将创建并运行你的第一个 Next.js 应用&#xff0c…

23:【stm32】ADC模数转换器

ADC模数转换器 1、ADC的简介2、逐次逼近型ADC3、采样时间和转换时间4、STM32中ADC模块5、编程案列5.1、AD单通道5.2、AD多通道 1、ADC的简介 ADC就是一个模数转换器&#xff0c;将引脚上连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁…

春秋云镜(ZZCMS 2023)·CVE-2023-50104

漏洞参考说明&#xff1a;GitHub - zzq66/cve4 漏洞复现&#xff1a; 1、访问 URL/3/E_bak5.1/upload/index.php 2、使用默认账户密码admin/admin登录 3、上传恶意语句 修改tablename字段为eval($_POST[1]) POST /3/E_bak5.1/upload/phomebak.php HTTP/1.1 Host: eci-2zehp12…

华为云征文 | 华为云Flexus云服务器X实例之Docker环境下部署JmalCloud个人网盘

华为云征文 | 华为云Flexus云服务器X实例之Docker环境下部署JmalCloud个人网盘 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、JmalCloud介绍2.1 JmalCloud简介2.2 JmalCloud优点2.3 JmalCloud使…

阿里云身份证二要素详细使用

初步&#xff1a; 先登录阿里云&#xff08;找官网链接&#xff09; 2、云市场搜索身份证二要素 看个人需求选择 3、我选择的是下边这个 4、接下来看文档具体调用&#xff08;在请求示例中有选择语言的代码 我选择的就是java&#xff09; 5、在控制台看appcode码 放入代码中…

揭秘难以复现Bug的解决之道:堆栈分析实战

目录 引言 友情提示难以复现的Bug之痛 寄存器(SP、LR)详解 SP寄存器&#xff1a;堆栈的指路明灯LR寄存器&#xff1a;函数调用与异常处理的桥梁 问题分析与解决流程揭秘 保存现场分析堆栈数据 堆栈结构入栈顺序 案例 J-Link工具 常用命令保存RAM数据到本地 分析栈基本信息 分…

全国大学生数据建模比赛——深度学习

全国大学生数学建模比赛中&#xff0c;深度学习可以成为解决复杂问题的有力手段。 一、深度学习的优势在比赛中的体现 强大的模式识别能力&#xff1a;深度学习模型&#xff0c;如卷积神经网络&#xff08;CNN&#xff09;和循环神经网络&#xff08;RNN&#xff09;&#xff0…

如何在 Raspberry Pi 5 上设置 Raspberry Pi AI Kit

本指南将帮助您在 Raspberry Pi 5 上安装 Raspberry Pi AI Kit。这将使您能够使用 Hailo AI 神经网络加速器运行 rpicam-apps 摄像头演示。 如果您在开始安装人工智能套件之前需要帮助&#xff0c;本指南提供了安装过程的分步图片。 安装人工智能套件&#xff1a;https://www.…

【初出江湖】SOA 与微服务:哪个最适合您的业务?

目录标题 面向服务的体系结构 (SOA)SOA 角色那么它们是如何通信和协同工作的呢&#xff1f; SOA 的优势 微服务架构微服务的优势 SOA 和微服务之间的区别SOA 与微服务&#xff1a;常见问题采用 SOA 和微服务面临哪些挑战&#xff1f;SOA 和微服务是否可以共存&#xff1f;每种体…

wpf prism 《1》、区域 、模块化

安装prism.DryIoc 修改app.xaml <prism:PrismApplication x:Class"WpfApp3.App"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local"clr-namespace:W…

vue2的使用

准备容器引包&#xff08;官网&#xff09; — 开发版本/生产版本创建Vue实例 new Vue()指定配置项&#xff0c;渲染数据 el:指定挂载点data提供数据 可以把线上的cdn的vue的地址下载到本地进行依赖。 Vue2下载地址 https://v2.vuejs.org/v2/guide/installation.html vue.js没…

Linux虚拟机搭建K8S环境

文章目录 一、环境准备二、系统初始化三、部署master四、添加node节点五、部署网络六、部署dashboard七、登录dashboard面板 一、环境准备 首先在vmware上新建4台相同配置的虚拟机&#xff0c;除了IP和主机名外&#xff0c;其余配置相同。由于是搭建K8S初始环境&#xff0c;没…

开学寄快递,行李轻松寄,出行无压力

“春风得意马蹄疾&#xff0c;一日看尽长安花。”新的学期&#xff0c;新的征程&#xff0c;新生们在准备迎接开学时&#xff0c;不想拖着重重的行李开学的&#xff0c;那么寄快递这件事可得提上日程啦! 一、如何选择快递 如何选择一家价格实惠的快递公司成为了大家关注的焦点…

Linux bash脚本 批量创建文件

目录 一. 需求二. 前置知识一. 无进度条版本1.1 知识点1.2 代码1.3 效果 二. 有进度条版本2.1 代码2.2 效果 一. 需求 在当前目录下生成指定年份的文件&#xff0c;要求从生成1月到12月&#xff0c;每个月份的文件。 若用户不指定年份&#xff0c;则默认生成当前年的文件提示…

【C++】手动实现String类的封装(分文件编译)

实现了String类的大部分封装&#xff0c;采用分文件编译 //mystring.h #ifndef MYSTRING_H #define MYSTRING_H#include <iostream> #include <cstring> using namespace std;class myString { private:char *str; //定义一个字符串int size; //记录字符串…