纯js瀑布流

思路分析：
定位后确定浏览器显示区域内，一行能放多少列图片盒子

• 获取页面的宽度
• 获取图片盒子的宽度
• 显示的列数=页面宽度/图片盒子宽度
• column=pageWidth/itemWidth

显示美观一般都会加一个空隙

• 显示的列数=页面宽度/（盒子宽度+间隙）
• column=pageWidth/(itemWidth+gap)

确定列数之后，排列第一行

• 下面还有很多图片盒子，我们先要排列第一行，所以在for循环里要判断下，当i(所有图片盒子的索引)<column(显示列数)时，说明在第一行；
• 知道第一行后，动态设置每个图片盒子的left值就能排好第一行
• left=i*(itemWidth+gap)

第一行排列好之后,获取第一行所有图片盒子的高度

• 需要定义一个数组arr，将获取到的高度存在数组中，因为第二行排列的时候需要考虑top值，此时只能根据第一行图片盒子的高度来设置
• 获取图片高度的时候要注意，程序必须写在入口函数onload里面，因为图片的加载特性是：等页面加载完之后采取请求加载，所以不写在入口函数里可能会出现高度获取不到的情况

排列第二行

• 获取到刚刚数组中，高度最小的那一列，将第二行的第一个图片盒子放置在它的下方
• 此时的left值就是高度最小的offsetLeft；top值就是:第一行高度最小列的高度
• 记录下高度最小列的索引index，后面计算会用到
• 设置完成之后，会发现后面所有的图片都叠在这个高度最小列的小面，原因就是此时的最小咧高度没有改变，应该加上下面图片的高度，得出一个新高度

改变最小列当前的高度

• 此时的这一列高度其实已经发生改变了，所以需要将新高度赋值给数组
• 当前高度最小列的高度=当前高度最小列高度+间隙+下面盒子高度
  HTML代码如下：

<div class="box">
    <div class="section"><img src="./img/1.jpg" alt=""></div>
    <div class="section"><img src="./img/2.jpg" alt=""></div>
    <div class="section"><img src="./img/3.jpg" alt=""></div>
    <div class="section"><img src="./img/4.jpg" alt=""></div>
    <div class="section"><img src="./img/5.jpg" alt=""></div>
    <div class="section"><img src="./img/6.jpg" alt=""></div>
    <div class="section"><img src="./img/7.jpg" alt=""></div>
    <div class="section"><img src="./img/8.jpg" alt=""></div>
    <div class="section"><img src="./img/9.jpg" alt=""></div>
    <div class="section"><img src="./img/10.jpg" alt=""></div>
    <div class="section"><img src="./img/11.jpg" alt=""></div>
    <div class="section"><img src="./img/12.jpg" alt=""></div>
    <div class="section"><img src="./img/13.jpg" alt=""></div>
    <div class="section"><img src="./img/14.jpg" alt=""></div>
    <div class="section"><img src="./img/15.jpg" alt=""></div>
  </div>

js代码如下：

window.onload = function() {
      var items = document.querySelector('.box').querySelectorAll('.section')
      // console.log(items);
      var gap = 10
      // 获取浏览器页面的宽度
      var pageWidth = document.documentElement.clientWidth || document.body.clientWidth
      // console.log(pageWidth);
      // 获取第一个图片的宽度
      var itemWidth = items[0].offsetWidth
      console.log(itemWidth);
      // 一行放几张图片
      var column = parseInt(pageWidth / (itemWidth + gap))
      var arr = []
      for(var i = 0; i < items.length; i++) {
        // 判断是否是第一行
        if(i < colums) {
          items[i].style.top = 0
          items[i].style.left = (itemWidth + gap) * i + 'px'
          arr.push(items[i].offsetHeight)
        } else {
          var minHeight = arr[0]
          var index = 0
          for(var j = 0; j < arr.length; j++) {
          if(minHeight > arr[j]) {
            // 取出数组中最矮盒子的高度
             minHeight = arr[j]
            //  取出数组中最矮盒子的索引
             index = j
           }
          }
          // 第一行外盒子的位置
          items[i].style.position = 'absolute'
          items[i].style.top = arr[index] + gap + 'px'
          items[i].style.left = items[index].offsetLeft + "px"
          // 更新高度
          arr[index] = arr[index] + items[i].offsetHeight + gap
        }   
      }
      
    }