网页特效（瀑布流布局）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11 
 12         .box {
 13             float: left;
 14             border: 1px solid #ccc;
 15             padding: 5px;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 <div class="container" id="container">
 21     <div class="box"><img src="images/P_000.jpg" alt=""/></div>
 22     <div class="box"><img src="images/P_001.jpg" alt=""/></div>
 23     <div class="box"><img src="images/P_002.jpg" alt=""/></div>
 24     <div class="box"><img src="images/P_003.jpg" alt=""/></div>
 25     <div class="box"><img src="images/P_004.jpg" alt=""/></div>
 26     <div class="box"><img src="images/P_005.jpg" alt=""/></div>
 27     <div class="box"><img src="images/P_006.jpg" alt=""/></div>
 28     <div class="box"><img src="images/P_007.jpg" alt=""/></div>
 29     <div class="box"><img src="images/P_008.jpg" alt=""/></div>
 30     <div class="box"><img src="images/P_009.jpg" alt=""/></div>
 31     <div class="box"><img src="images/P_010.jpg" alt=""/></div>
 32     <div class="box"><img src="images/P_011.jpg" alt=""/></div>
 33     <div class="box"><img src="images/P_012.jpg" alt=""/></div>
 34     <div class="box"><img src="images/P_013.jpg" alt=""/></div>
 35     <div class="box"><img src="images/P_014.jpg" alt=""/></div>
 36     <div class="box"><img src="images/P_015.jpg" alt=""/></div>
 37     <div class="box"><img src="images/P_016.jpg" alt=""/></div>
 38     <div class="box"><img src="images/P_017.jpg" alt=""/></div>
 39     <div class="box"><img src="images/P_018.jpg" alt=""/></div>
 40     <div class="box"><img src="images/P_019.jpg" alt=""/></div>
 41 </div>
 42 </body>
 43 </html>
 44 <script>
 45     window.onload = function () {
 46         var container = document.getElementById("container");
 47         var boxs = container.children;
 48         var pageWidth = window.innerWidth;
 49         var boxWidth = boxs[0].offsetWidth;
 50         var column = Math.floor(pageWidth / boxWidth);
 51         var arrHeight = [];
 52         function waterfall() {
 53             for (var i = 0; i < boxs.length; i++) {
 54                 if (i < column) {
 55                     arrHeight[i] = boxs[i].offsetHeight;
 56                 } else {
 57                     var minHeight = getMin(arrHeight).value;
 58                     var minHeightIndex = getMin(arrHeight).index;
 59                     boxs[i].style.position = "absolute";
 60                     boxs[i].style.left = boxs[minHeightIndex].offsetLeft + "px";
 61                     boxs[i].style.top = minHeight + "px";
 62                     arrHeight[minHeightIndex] = minHeight + boxs[i].offsetHeight;
 63                 }
 64             }
 65         }
 66         waterfall();
 67         function bottomed() {
 68             var scrollTop = window.pageYOffset;
 69             var clientHeight = window.innerHeight;
 70             var lastBoxTop = boxs[boxs.length - 1].offsetTop;
 71             if ((scrollTop + clientHeight) > lastBoxTop) {
 72                 return true;
 73             }
 74         }
 75         window.onscroll = function () {
 76             if (bottomed()) {
 77                 var json = [
 78                     {"src": "images/P_000.jpg"},
 79                     {"src": "images/P_001.jpg"},
 80                     {"src": "images/P_002.jpg"},
 81                     {"src": "images/P_003.jpg"},
 82                     {"src": "images/P_004.jpg"},
 83                     {"src": "images/P_005.jpg"},
 84                     {"src": "images/P_006.jpg"},
 85                     {"src": "images/P_007.jpg"},
 86                     {"src": "images/P_008.jpg"},
 87                     {"src": "images/P_009.jpg"},
 88                 ]
 89                 for (var i = 0; i < json.length; i++) {
 90                     var div = document.createElement("div");
 91                     div.className = "box";
 92                     var img = document.createElement("img");
 93                     img.src = json[i].src;
 94                     div.appendChild(img);
 95                     container.appendChild(div);
 96                 }
 97                 waterfall();
 98             }
 99         }
100     }
101 
102     function getMin(arr) {
103         var min = {};
104         min.index = 0;
105         min.value = arr[min.index];
106         for (var i = 0; i < arr.length; i++) {
107             if (arr[i] < min.value) {
108                 min.value = arr[i];
109                 min.index = i;
110             }
111         }
112         return min;
113     }
114 
115 
116 </script>
网页特效（瀑布流布局）

猜你喜欢
