1.什么是瀑布流

它们的图片明明每一张的高度大小都不同，但是却能自动地适应，排成一行一行地展示，并且下拉到底的时候，加载的图片也会自动适应，这就是瀑布流。如下图：
pubuliu.png

2.事先准备

HTML结构

  1. <body>
  2.     <div class="itemBox">
  3.         <div class="item">
  4.             <img src="./images/P_000.jpg" alt="">
  5.         </div>
  6.         <div class="item">
  7.             <img src="./images/P_001.jpg" alt="">
  8.         </div>
  9.                  ...
  10.          ...
  11.          ...
  12.         <div class="item">
  13.             <img src="./images/P_014.jpg" alt="">
  14.         </div>
  15.         <div class="item">
  16.             <img src="./images/P_015.jpg" alt="">
  17.         </div>
  18.     </div>
  19. </body>
  20. //准备大概15张图片

CSS样式

  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  7.     .itemBox {
  8.         width: 1050px;
  9.         margin: 0 auto;
  10.         position: relative;
  11.     }
  13.     .item {
  14.         border: 1px solid #ccc;
  15.         padding: 4px;
  16.         position: absolute;
  17.     }
  18. </style>

3.瀑布流核心

JavaScript行为：

  1. <script>
  2.         window.onload = function () {  //页面加载完毕后执行
  3.             var arr = [];  //存储照片行高
  4.             // 1.获取相关元素
  5.             var itemBox = document.getElementsByClassName('itemBox')[0];
  6.             var items = document.getElementsByClassName('item');
  7.             // 2.1获取.itemBox   宽度
  8.             var itemBoxW = itemBox.offsetWidth;
  9.             //  2.2获取 .item 宽度
  10.             var itemW = items[0].offsetWidth;
  11.             // 3.求出列数
  12.             var column = parseInt(itemBoxW / itemW);
  13.             // 4.求图片间间距
  14.             var distence = (itemBoxW - itemW * column) / (column - 1);
  15.             // 5.调用实现瀑布流布局的方法
  16.             waterFull();
  17.             // 6.滚动页面时，加载数据
  18.             window.onscroll = function () {
  19.              // 滚动条顶部到网页顶部的距离+浏览器窗口高度 > 数组中最低高度
  20.                 if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
  21.                     var json = [
  22.                         { "src": "./images/P_000.jpg" },
  23.                         { "src": "./images/P_001.jpg" },
  24.                         { "src": "./images/P_002.jpg" },
  25.                         { "src": "./images/P_003.jpg" },
  26.                         { "src": "./images/P_004.jpg" },
  27.                         { "src": "./images/P_005.jpg" },
  28.                         { "src": "./images/P_006.jpg" },
  29.                         { "src": "./images/P_007.jpg" },
  30.                         { "src": "./images/P_008.jpg" },
  31.                         { "src": "./images/P_009.jpg" },
  32.                         { "src": "./images/P_010.jpg" }
  33.                     ];
  34.                     for (var i = 0; i < json.length; i++) {
  35.                        //创建div标签
  36.                         var div = document.createElement("div");
  37.                       //设置div标签的class值为"item"
  38.                         div.className = "item";
  39.                       //创建img标签
  40.                         var img = document.createElement("img");
  41.                       //设置标签的src属性为json对象里面src
  42.                         img.src = json[i].src;
  43.                      //将img添加到div标签里面
  44.                         div.appendChild(img);
  45.                       //将div添加到页面
  46.                         itemBox.appendChild(div);
  47.                     }
  48.                     waterFull();
  49.                 }
  50.             }
  52.             //实现瀑布流布局的方法
  53.             function waterFull() {
  54.                 for (var i = 0; i < items.length; i++) {
  55.                     if (i < column) {    // 设置第一行left值
  56.                         items[i].style.left = (itemW + distence) * i + 'px';
  57.                         arr[i] = items[i].offsetHeight; //将一个行每个行高存储到数组中
  58.                     } else {
  59.                         var minV = getMin(arr).minV;
  60.                         var minI = getMin(arr).minI;
  61.                         items[i].style.left = (itemW + distence) * minI + 'px';
  62.                         items[i].style.top = minV + distence + 'px';
  63.                         arr[minI] = minV + distence + items[i].offsetHeight;//将新高度存入数组
  64.                     }
  65.                 }
  66.             }
  67.             //获取数组最小值以及索引
  68.             function getMin(arr) {
  69.                 var obj = {};
  70.                 obj.minV = arr[0];  //存储数组最小值
  71.                 obj.minI = 0;     //存储最小值下标
  72.                 for (var i = 1; i < arr.length; i++) {
  73.                     if (obj.minV > arr[i]) {
  74.                         obj.minV = arr[i];
  75.                         obj.minI = i;
  76.                     }
  77.                 }
  78.                 return obj;
  79.             }
  80.         }
  81.     </script>