Tetegw
4/8/2018 - 3:42 AM

瀑布流

原生js 瀑布流，静态文件

瀑布流
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .demo {
            padding: 5px;
            border: 1px solid cyan;
            float: left;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="demo"><img src="images/P_000.jpg" alt=""></div>
    <div class="demo"><img src="images/P_001.jpg" alt=""></div>
    <div class="demo"><img src="images/P_002.jpg" alt=""></div>
    <div class="demo"><img src="images/P_003.jpg" alt=""></div>
    <div class="demo"><img src="images/P_004.jpg" alt=""></div>
    <div class="demo"><img src="images/P_005.jpg" alt=""></div>
    <div class="demo"><img src="images/P_006.jpg" alt=""></div>
    <div class="demo"><img src="images/P_007.jpg" alt=""></div>
    <div class="demo"><img src="images/P_008.jpg" alt=""></div>
    <div class="demo"><img src="images/P_009.jpg" alt=""></div>
    <div class="demo"><img src="images/P_010.jpg" alt=""></div>
    <div class="demo"><img src="images/P_011.jpg" alt=""></div>
    <div class="demo"><img src="images/P_012.jpg" alt=""></div>
    <div class="demo"><img src="images/P_013.jpg" alt=""></div>
    <div class="demo"><img src="images/P_014.jpg" alt=""></div>
    <div class="demo"><img src="images/P_015.jpg" alt=""></div>
    <div class="demo"><img src="images/P_016.jpg" alt=""></div>
    <div class="demo"><img src="images/P_017.jpg" alt=""></div>
    <div class="demo"><img src="images/P_018.jpg" alt=""></div>
    <div class="demo"><img src="images/P_019.jpg" alt=""></div>
    <div class="demo"><img src="images/P_020.jpg" alt=""></div>
</div>

<script src="../commen.js"></script>
<script>
//1. 对于第一行图片来说，直接左浮动即可。
//2. 对于其他图片，需要使用定位定过去，每次都定位到最小列那里去。
window.onload = function () {
  var box = document.getElementById("box");
  var demos = box.children;
  //1. 要确定第一行有多少张图片

  var clientWidth = getClient().width;
  var demoWidth = demos[0].offsetWidth;
  var clos = Math.floor(clientWidth / demoWidth);

  //2. 我可以把第一行里面的图片的高度，存放到一个数组里面去。[111,22,44,66,88,190]
  var arr = [];
  for (var i = 0; i < clos; i++) {
      arr.push(demos[i].offsetHeight)
  }
  //3. 通过数组就能找到最小列。对于第一列后面的那些图片，就可以定位到最小列。
  for (var i = clos; i < demos.length; i++) {
      //3.1绝对定位
      var div = demos[i];
      position(div);
  }

  function position(div) {
      div.style.position = "absolute";
      //3.2获取arr最小值
      var index = getMin(arr);
      //3.3设置top left
      div.style.left = demos[index].offsetLeft + "px";
      div.style.top = arr[index] + "px";
      //3.4改变数组
      arr[index] += div.offsetHeight;
  }

  function getMin(arr) {
      var min = arr[0];
      var index = 0;
      for (var i = 1; i < arr.length; i++) {
          if (arr[i] < min) {
              min = arr[i];
              index = i;
          }
      }
      return index;
  }
 
  
   window.onscroll = function () {
      var clientH = getClient().height;
      var scrollH = getScroll().top;
      //如果可视区+卷去高度>最后一张的offtop 则加载图片
      if( clientH+scrollH >= demos[demos.length -1].offsetTop ){
          var datas = [
              {"src":"images/P_000.jpg"},
              {"src":"images/P_001.jpg"},
              {"src":"images/P_002.jpg"},
              {"src":"images/P_003.jpg"},
              {"src":"images/P_004.jpg"},
              {"src":"images/P_005.jpg"},
              {"src":"images/P_006.jpg"},
              {"src":"images/P_007.jpg"},
              {"src":"images/P_008.jpg"},
              {"src":"images/P_009.jpg"},
              {"src":"images/P_010.jpg"},
              {"src":"images/P_011.jpg"},
              {"src":"images/P_012.jpg"},
              {"src":"images/P_013.jpg"},
              {"src":"images/P_014.jpg"},
              {"src":"images/P_015.jpg"},
              {"src":"images/P_016.jpg"},
              {"src":"images/P_017.jpg"},
              {"src":"images/P_018.jpg"},
              {"src":"images/P_019.jpg"},
              {"src":"images/P_020.jpg"}
          ]

          for (var i = 0; i < datas.length; i++) {
              var div = document.createElement("div");
              div.className = "demo";
              div.innerHTML = '<img src="'+datas[i].src+'" alt="">';
              box.appendChild(div);
              position(div)
          }
      }
  }
}

</script>
</body>
</html>