1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>瀑布流布局</title>
6 <link rel="stylesheet" href="css/index.css">
7 </head>
8 <body>
9 <div id="main">
10
11 <div class="box">
12 <div class="pic">
13 <img src="images/img01.jpg" alt="">
14 </div>
15 </div>
16
17 <div class="box"><div class="pic"><img src="images/img02.jpg" alt=""></div></div>
18 <div class="box"><div class="pic"><img src="images/img03.jpg" alt=""></div></div>
19 <div class="box"><div class="pic"><img src="images/img04.jpg" alt=""></div></div>
20 <div class="box"><div class="pic"><img src="images/img05.jpg" alt=""></div></div>
21 <div class="box"><div class="pic"><img src="images/img06.jpg" alt=""></div></div>
22 <div class="box"><div class="pic"><img src="images/img07.jpg" alt=""></div></div>
23 <div class="box"><div class="pic"><img src="images/img08.jpg" alt=""></div></div>
24 <div class="box"><div class="pic"><img src="images/img09.jpg" alt=""></div></div>
25 <div class="box"><div class="pic"><img src="images/img10.jpg" alt=""></div></div>
26 <div class="box"><div class="pic"><img src="images/img11.jpg" alt=""></div></div>
27 <div class="box"><div class="pic"><img src="images/img12.jpg" alt=""></div></div>
28 <div class="box"><div class="pic"><img src="images/img13.jpg" alt=""></div></div>
29 <div class="box"><div class="pic"><img src="images/img14.jpg" alt=""></div></div>
30 <div class="box"><div class="pic"><img src="images/img15.jpg" alt=""></div></div>
31 <div class="box"><div class="pic"><img src="images/img16.jpg" alt=""></div></div>
32 <div class="box"><div class="pic"><img src="images/img17.jpg" alt=""></div></div>
33 <div class="box"><div class="pic"><img src="images/img18.jpg" alt=""></div></div>
34 <div class="box"><div class="pic"><img src="images/img19.jpg" alt=""></div></div>
35 <div class="box"><div class="pic"><img src="images/img20.jpg" alt=""></div></div>
36 <div class="box"><div class="pic"><img src="images/img21.jpg" alt=""></div></div>
37 <div class="box"><div class="pic"><img src="images/img22.jpg" alt=""></div></div>
38 <div class="box"><div class="pic"><img src="images/img23.jpg" alt=""></div></div>
39 <div class="box"><div class="pic"><img src="images/img24.jpg" alt=""></div></div>
40 <div class="box"><div class="pic"><img src="images/img25.jpg" alt=""></div></div>
41 <div class="box"><div class="pic"><img src="images/img26.jpg" alt=""></div></div>
42 <div class="box"><div class="pic"><img src="images/img27.jpg" alt=""></div></div>
43 <div class="box"><div class="pic"><img src="images/img28.jpg" alt=""></div></div>
44 <div class="box"><div class="pic"><img src="images/img29.jpg" alt=""></div></div>
45 <div class="box"><div class="pic"><img src="images/img30.jpg" alt=""></div></div>
46 <div class="box"><div class="pic"><img src="images/img31.jpg" alt=""></div></div>
47 <div class="box"><div class="pic"><img src="images/img32.jpg" alt=""></div></div>
48 <div class="box"><div class="pic"><img src="images/img33.jpg" alt=""></div></div>
49 <div class="box"><div class="pic"><img src="images/img34.jpg" alt=""></div></div>
50 <div class="box"><div class="pic"><img src="images/img35.jpg" alt=""></div></div>
51 <div class="box"><div class="pic"><img src="images/img36.jpg" alt=""></div></div>
52 <div class="box"><div class="pic"><img src="images/img37.jpg" alt=""></div></div>
53 <div class="box"><div class="pic"><img src="images/img38.jpg" alt=""></div></div>
54 <div class="box"><div class="pic"><img src="images/img39.jpg" alt=""></div></div>
55 <div class="box"><div class="pic"><img src="images/img40.jpg" alt=""></div></div>
56 </div>
57
58 <script src="js/UnderScore.js"></script>
59 <script src="js/MyTool.js"></script>
60 <script src="js/index.js"></script>
61 </body>
62 </html>
1 (function (w) {
2 w.myTool = {
3 $: function (id) {
4 return typeof id === 'string' ? document.getElementById(id) : null;
5 },
6 hasClassName: function (obj, cs) {
7 var reg = new RegExp('\\b' + cs + '\\b');
8 return reg.test(obj.className);
9 },
10 addClassName: function (obj, cs) {
11 if(!this.hasClassName(obj,cs)){
12 obj.className += ' ' + cs;
13 }
14 },
15 removeClassName: function (obj, cs) {
16 var reg = new RegExp('\\b' + cs + '\\b');
17 // 删除class
18 obj.className = obj.className.replace(reg, '');
19 },
20 toggleClassName: function (obj, cs) {
21 if(this.hasClassName(obj,cs)){
22 // 有， 删除
23 this.removeClassName(obj,cs);
24 }else {
25 // 没有，则添加
26 this.addClassName(obj,cs);
27 }
28 },
29 scroll: function() {
30 if(window.pageYOffset !== null){ // 最新的浏览器
31 return {
32 "top": window.pageYOffset,
33 "left": window.pageXOffset
34 }
35 }else if(document.compatMode === 'CSS1Compat'){ // W3C
36 return {
37 "top": document.documentElement.scrollTop,
38 "left": document.documentElement.scrollLeft
39 }
40 }
41 return {
42 "top": document.body.scrollTop,
43 "left": document.body.scrollLeft
44 }
45 }
46 };
47 })(window);
1 window.addEventListener('load', function (ev) {
2 // 1. 实现瀑布流布局
3 waterFull('main', 'box');
4
5 // 2. 加载数据
6 var timer1 = null;
7 window.addEventListener('scroll', function (ev1) {
8 clearTimeout(timer1);
9 timer1 = setTimeout(function () {
10 if(checkWillLoadNewBox()){ // 真
11 // console.log('加载……')
12 // 2.1 假数据
13 var dataArr = [
14 {"src": "img02.jpg"},
15 {"src": "img04.jpg"},
16 {"src": "img06.jpg"},
17 {"src": "img01.jpg"},
18 {"src": "img03.jpg"},
19 {"src": "img20.jpg"},
20 {"src": "img14.jpg"}
21 ];
22
23 // 2.2 遍历数据
24 for (var i = 0; i < dataArr.length; i++) {
25 var newBox = document.createElement('div');
26 newBox.className = 'box';
27 myTool.$('main').appendChild(newBox);
28
29 var newPic = document.createElement('div');
30 newPic.className = 'pic';
31 newBox.appendChild(newPic);
32
33 var newImg = document.createElement('Img');
34 newImg.src = 'images/' + dataArr[i].src;
35 newPic.appendChild(newImg);
36 }
37
38 // 2.3 重新进行瀑布流布局
39 waterFull('main', 'box');
40 }
41 }, 1000);
42 });
43
44 // 3. 页面尺寸发生改变重新布局
45 var timer = null;
46 window.addEventListener('resize', function (ev1) {
47 clearTimeout(timer);
48 // 节流
49 timer = setTimeout(function () {
50 waterFull('main', 'box');
51 }, 200);
52 });
53 });
54
55 /**
56 * 实现瀑布流布局
57 * @param {String}parent
58 * @param {String}child
59 */
60 function waterFull(parent, child) {
61 // 1. 父盒子居中
62 // 1.1 获取标签
63 var allBox = myTool.$(parent).getElementsByClassName(child);
64 // console.log(allBox);
65 // 1.2 获取其中一个子盒子的宽度
66 var boxWidth = allBox[0].offsetWidth;
67 // 1.3 获取文档的宽度
68 var screenW = document.documentElement.clientWidth || document.body.clientWidth;
69 // 1.4 求出列数
70 var cols = parseInt(screenW / boxWidth);
71 // 1.5 父盒子居中
72 myTool.$(parent).style.width = cols * boxWidth + 'px';
73 myTool.$(parent).style.margin = '0 auto';
74
75 // 2. 子盒子定位
76 // 2.1 定义变量
77 var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
78 // 2.2 遍历所有的盒子
79 for (var i = 0; i < allBox.length; i++) {
80 boxHeight = allBox[i].offsetHeight;
81 // 2.3 判断
82 if(i < cols){ // 第一行
83 heightArr.push(boxHeight);
84 allBox[i].style = '';
85 }else { // 剩余行
86 // 2.4 取出数组中最矮盒子的高度 underscro.js的方法
87 minBoxHeight = _.min(heightArr);
88 // 2.5 取出最矮盒子在数组中的索引
89 minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
90 // 2.6 剩余子盒子的定位
91 allBox[i].style.position = 'absolute';
92 allBox[i].style.left = minBoxIndex * boxWidth + 'px';
93 allBox[i].style.top = minBoxHeight + 'px';
94 // 2.7 更新高度
95 heightArr[minBoxIndex] += boxHeight;
96 }
97 }
98
99 // console.log(heightArr, minBoxHeight, minBoxIndex);
100
101 }
102
103 function getMinBoxIndex(arr, val){
104 for (var i = 0; i < arr.length; i++) {
105 if(arr[i] === val){
106 return i;
107 }
108 }
109 }
110
111 function checkWillLoadNewBox() {
112 // 1. 获取最后的盒子
113 var allBox = myTool.$('main').getElementsByClassName('box');
114 var lastBox = allBox[allBox.length - 1];
115
116 // 2. 求最后盒子高度的一半
117 var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
118 // console.log(lastBoxDis);
119
120 // 3. 求出页面的高度
121 var screenH = document.documentElement.clientHeight || document.body.clientHeight;
122
123 // 4. 求出页面滚出浏览器的高度
124 var scrollTopH = myTool.scroll().top;
125
126 // 5. 返回结果
127 return lastBoxDis <= screenH + scrollTopH;
128 }
浙公网安备 33010602011771号