jquery实现下拉加载更多

下拉加载更多这种原理很容易想明白，但是不自己写一个简单的，老是不踏实，获取什么高度再哪里获取之类的。于是自己简单写了个，就是页面上有几个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         }
64     })
65 </script>
66 </html>

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

来源：oschina

链接：https://my.oschina.net/u/4351449/blog/4512231

标签

javascript

Solid

FLEX

jquery