• 网页特效(瀑布流布局)


      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>
  • 相关阅读:
    如何写UCHOME移动接口
    无限分类数据树形格式化
    linux下安装eclipse
    python编辑器对比和推荐
    黑马程序员面向对象07天6 (final)
    黑马程序员面向对象07天4 (super,this)
    黑马程序员面向对象07天8 (模版方法)
    黑马程序员面向对象07天7 (接口Interface)
    黑马程序员面向对象08天2 (多态)
    黑马程序员面向对象07天2 (抽象类测试)
  • 原文地址:https://www.cnblogs.com/BingBing-Deng/p/10292230.html
Copyright © 2020-2023  润新知