下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的。于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div。顺便又查了下各种高度宽度,给body加边框去边框看了下具体差异,不过一个边框的差异,只要滚动条拉到的某个位置距离底部距离大于边框的高度都不会影响加载更多的效果。代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>滚动加载更多</title>
  6. <style type="text/css">
  7. body,div{
  8. margin:0;
  9. padding:0;
  10. }
  11. body{
  12. width: 100%;
  13. background-color: #ccc;
  14. display: flex;
  15. flex-wrap: wrap;
  16. justify-content: space-around;
  17. border: 1px solid gold;
  18. }
  19. .load_div{
  20. width: 400px;
  21. height: 300px;
  22. border:1px solid red;
  23. }
  24. .load_div2{
  25. width: 400px;
  26. height: 300px;
  27. border:1px solid green;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="load_div"></div>
  33. <div class="load_div"></div>
  34. <div class="load_div"></div>
  35. <div class="load_div"></div>
  36. <div class="load_div"></div>
  37. <div class="load_div"></div>
  38. <div class="load_div"></div>
  39. <div class="load_div"></div>
  40. <div class="load_div"></div>
  41. </body>
  42. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  43. <script type="text/javascript">
  44. var totalHeight = $(document).height();//整个文档高度
  45. var seeHeight = $(window).height();//浏览器可视窗口高度
  46. var thisBodyHeight = $(document.body).height();//浏览器当前窗口文档body的高度
  47. var totalBodyHeight = $(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin
  48. var thisWidth = $(window).width(); //浏览器当前窗口可视区域宽度
  49. var thisDocumentWidth = $(document).width();//浏览器当前窗口文档对象宽度
  50. var thisBodyWidth = $(document.body).width();//浏览器当前窗口文档body的宽度
  51. var totalBodyWidth = $(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin
  52. var scrollTop = $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)
  53. // console.log(totalHeight,seeHeight,thisBodyHeight,totalBodyHeight,thisWidth,thisDocumentWidth,thisBodyWidth,totalBodyWidth,scrollTop);
  54. //添加滚动事件
  55. $(window).scroll(function(){
  56. scrollTop = $(window).scrollTop();
  57. totalHeight = $(document).height();
  58. // console.log(scrollTop,seeHeight,totalHeight)
  59. if(scrollTop+seeHeight+50>totalHeight){
  60. var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>';
  61. $('body').append(htmlText);
  62. }
  63. })
  64. </script>
  65. </html>

这个是写的距离底部50px的时候加载div

jquery实现下拉加载更多的更多相关文章

  1. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  2. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  3. Windows Phone 8.1开发:如何让ListView下拉加载更多?

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  4. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  5. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  6. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  7. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

  8. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

  9. 集成iscroll 下拉加载更多 jquery插件

    一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...

随机推荐

  1. Flask实战-留言板-安装虚拟环境、使用包组织代码

    Flask实战 留言板 创建项目目录messageboard,从GreyLi的代码中把Pipfile和Pipfile.lock文件拷贝过来,这两个文件中定义了虚拟环境中需要安装的包的信息和位置,进入m ...

  2. DUILIB消息处理过程

    DUILIB消息处理机制 方法一. 首先窗口基类创建 CWindowWnd->Create() 调用 CWindowWnd->RegisterWindowClass() 注册 CWindo ...

  3. MySQL复制表-CREATE SELECT

    假设存在以下Table: mysql> select * from staff; +----+----------+-------+ | id | name | slary | +----+-- ...

  4. 下拉框click事件与搜索框blur事件的爱恨纠葛

    还原车祸现场 功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码 //参会单位联想 $('input[name= ...

  5. 【js】版本号对比处理方案

    今天在处理一个bug问题,适配客户端版本:若版本号未达到,则不可运行该功能,若达到则可运行. 版本号规则如下:(一般统一为2个点,其他的是数字,版本号从高位到低位,首位越大则越大,首位相同则对比下一位 ...

  6. 【js】关于this指针-理解call、apply、bind

    首次讲解视频,听了一下,录音声音太小(暂不知道该怎么调节),老是咳咳,不太流畅.暂时不理想,日后继续努力.(能写出来还不够,还要会说出来) 首先,this指针只存在于函数(function)中.用于指 ...

  7. STM32时钟

    https://blog.csdn.net/qq_29350001/article/details/81409693 这是个大佬讲的 F429有5个时钟源,HSI,HSE,LSI,LSE;PLL; 对 ...

  8. java 动态绑定 多态

    继承链中对象方法的调用规则:当前类-->父类-->爷类-->..-->祖先类(只能向上找,不能向下找)优先级:this.method(Obj) > super.metho ...

  9. Pandas数据处理+Matplotlib绘图案例

    利用pandas对数据进行预处理然后再使用matplotlib对处理后的数据进行数据可视化是数据分析中常用的方法. 第一组例子(星巴克咖啡店) 假如我们现在有这样一组数据:星巴克在全球的咖啡店信息,如 ...

  10. JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法

    网上搜索了,目前主流的Js代码压缩工具主要有Uglify.YUI Compressor.Google Closure Compiler,简单试用了UglifyJS 和Google Closure Co ...