1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul{
12 list-style: none;
13 width: 200px;
14 float: left;
15 text-align: center;
16 }
17 #wrap{
18 width: 600px;
19 margin: 20px auto;
20 }
21
22 ul li{
23 width: 80%;
24 background: grey;
25 margin-top: 10%;
26 }
27
28
29 </style>
30 </head>
31 <body>
32
33 <div id="wrap">
34 <ul></ul>
35 <ul></ul>
36 <ul></ul>
37 </div>
38
39 </body>
40
41 <script type="text/javascript">
42 var ulArray = document.getElementsByTagName("ul");
43 var startIndex = 0;
44
45 function createLi(){
46 // 决定了创建50个 li 标签
47 for (var i = 0;i< 50;i++) {
48 var li = document.createElement("li");
49 li.innerHTML = i + 1 + startIndex;
50 // 设置 li 的高度
51 li.style.height = parseInt(Math.random() * 101 + 50) + "px";
52
53 // 查找 最短长度的ul 标签
54 var minUL = ulArray[0];
55 for (var j = 0;j < ulArray.length;j++) {
56 if (minUL.offsetHeight > ulArray[j].offsetHeight) {
57 minUL = ulArray[j];
58 }
59 }
60 minUL.appendChild(li);
61 }
62 startIndex += 50;
63 }
64
65 createLi();
66 // 检测滑动
67 // 懒加载
68 window.onscroll = function(){
69 // 1、如何判断滚动到了最底部
70 // html 节点的高度
71 var bodyHeight = document.documentElement.offsetHeight;
72 // 可视窗口的高度
73 var windowHeight = document.documentElement.clientHeight;
74
75
76 var top = document.documentElement.scrollTop || document.body.scrollTop;
77
78 // 当滑动到最大的可滑动高度时候
79 if(top == bodyHeight - windowHeight){
80 // 继续创建li标签
81 createLi();
82 }
83
84
85
86
87 }
88
89
90 </script>
91
92 </html>