瀑布流案例

 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 }