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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>滚动加载更多</title>

     <style type="text/css">

         body,div{

             margin:0;

             padding:0;

         }

         body{

             width: 100%;

             background-color: #ccc;

             display: flex;

             flex-wrap: wrap;

             justify-content: space-around;

             border: 1px solid gold;

         }

         .load_div{

             width: 400px;

             height: 300px;

             border:1px solid red;

         }

         .load_div2{

             width: 400px;

             height: 300px;

             border:1px solid green;

         }

     </style>

 </head>

 <body>

     <div class="load_div"></div>

     <div class="load_div"></div>

     <div class="load_div"></div>

     <div class="load_div"></div>

     <div class="load_div"></div>

     <div class="load_div"></div>

     <div class="load_div"></div>

     <div class="load_div"></div>

     <div class="load_div"></div>

 </body>

 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

 <script type="text/javascript">

     var totalHeight = $(document).height();//整个文档高度

     var seeHeight = $(window).height();//浏览器可视窗口高度

     var thisBodyHeight = $(document.body).height();//浏览器当前窗口文档body的高度

     var totalBodyHeight = $(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin

     var thisWidth = $(window).width(); //浏览器当前窗口可视区域宽度

     var thisDocumentWidth = $(document).width();//浏览器当前窗口文档对象宽度

     var thisBodyWidth = $(document.body).width();//浏览器当前窗口文档body的宽度

     var totalBodyWidth = $(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin

     var scrollTop = $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）

     // console.log(totalHeight,seeHeight,thisBodyHeight,totalBodyHeight,thisWidth,thisDocumentWidth,thisBodyWidth,totalBodyWidth,scrollTop);

     //添加滚动事件

     $(window).scroll(function(){

         scrollTop = $(window).scrollTop();

         totalHeight = $(document).height();

         // console.log(scrollTop,seeHeight,totalHeight)

         if(scrollTop+seeHeight+50>totalHeight){

             var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>';

             $('body').append(htmlText);

         }

     })

 </script>

 </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. JVM进程启动会启动哪些线程？

    首先要明白一点:JVM本身是一个多线程的程序,和我们编写的java应用程序一样,当JVM启动执行时就是在操作系统中启动了一个JVM进程.我们编写的java单线程或多线程应用进程都是在JVM这个程序中作 ...

  2. 20165305 《网络对抗技术》 Kali安装

    一.安装kali 在虚拟机中安装kali我参考了下面的网页,里面写的很全面,所以我就不重复了,我主要说一下kali里面的环境配置. 在虚拟机中安装kali linux 注意:输入用户和密码时,kali ...

  3. appium工作原理

    Appium原理 面试的时候,被问到appium原理,一点不会,实在尴尬.大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/69220 ...

  4. go语言time包的使用

    时间类型 time.Time类型表示时间. //时间类型 func timeDemo() { now := time.Now() fmt.Println(now) //2019-04-20 13:52 ...

  5. SpringBoot+Thymeleaf问题

    springboot在controller返回数据到thymeleaf报404 用springboot做一个例子,访问controller可以返回数据,但是到thymeleaf却报404, 检查发现路 ...

  6. 最短路径 SPFA P3371 【模板】单源最短路径（弱化版）

    P3371 [模板]单源最短路径(弱化版) SPFA算法: SPFA 算法是 Bellman-Ford算法 的队列优化算法的别称,通常用于求含负权边的单源最短路径,以及判负权环.SPFA 最坏情况下复 ...

  7. volatile关键字作用

    1.阻止编译器对代码进行优化.即读取某个变量值时,不从寄存器中读取而是从变量里读. 2.编译器的优化 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一个寄存器中:以后 ...

  8. PL/SQL数据类型

    在定义变量或常量时,必须要指定一个数据类型,PL/SQL是一种静态类型化的程序设计语言,静态类型化又称为强类型化,也就是说类型会在编译时而不是在运行时被检查,这样在编译时便能发现类型错误,以便增强程序 ...

  9. Django回顾

    Django简介 Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义we ...

  10. python on sql

    USE [DemoDb]GOexecute sp_execute_external_script @language = N'Python', @script = N'a = 1b = 2c = a/ ...