下拉加载更多这种原理很容易想明白，但是不自己写一个简单的，老是不踏实，获取什么高度再哪里获取之类的。于是自己简单写了个，就是页面上有几个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. Fetch和ajax的比较和区别

    传统 Ajax 已死,Fetch 永生   Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全 ...

  2. Python 计算当真因子个数为偶数个时为幸运数，计算区间内幸运数之和

    晚饭后朋友发来个问题,正好无事做,动手写了一下 若一个正整数有偶数个不同的真因子,则称该数为幸运数.如4含有2个真因子为 1 和 2 .故4是幸运数.求[2,100]之间的全部幸运数之和. 常规思路 ...

  3. Java RSA 公钥加密私钥解密

    package com.lee.utils; import java.io.DataInputStream; import java.io.File; import java.io.FileInput ...

  4. 终于有人把云计算、大数据和 AI 讲明白了

    最近学习hadoop以及生态,顺便看到了这篇文章,总结的很到位,转载下. 我今天要讲这三个话题,一个是云计算,一个大数据,一个人工智能,我为什么要讲这三个东西呢?因为这三个东西现在非常非常的火,它们之 ...

  5. Android组件系列----Intent详解（转载笔记）

    [正文] Intent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要. 一.什么是Intent 1.Intent的概念: Android中提供了Intent机制来协助应用 ...

  6. Oracle错误——ORA-39000:转储文件说明错误、ORA-39001:参数值无效、ORA-39088:文件名不能包含路径说明

    错误 在使用数据泵导入文件时,报错如下 Next 出错原因 在使用参数DUMPFILE指定文件名称时,不能包含路径信息,只可以使用文件名称 Next 解决办法 在使用数据泵进行数据导入导出前,必须要创 ...

  7. Bootstrap3基础 引入本地的bootstrap

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. company_credit

    /** * Created by wu-yj on 2016/5/6. */ import java.sql.{Connection, DriverManager, PreparedStatement ...

  9. Visual Studio 2017/2019 企业版 Enterprise 激活码

    VS2017 Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF VS2017 Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH ...

  10. poj1151 Atlantis （线段树+扫描线+离散化）

    有点难,扫描线易懂,离散化然后线段树处理有点不太好理解. 因为这里是一个区间,所有在线段树中更新时,必须是一个长度大于1的区间才是有效的,比如[l,l]这是一根线段,而不是区间了. AC代码 #inc ...