一、什么是瀑布流布局？

电商系统的瀑布流布局（Waterfall layout），也称为瀑布流式布局，是一种在网页或移动应用程序中呈现内容的设计方式，它将不同大小的内容区块以瀑布流的方式依次排列，图片之间不是正好对齐的，而是错落有致，总有图片看不完全，让用户可以无限滚动地查看商品或内容，进而提高销售额，被广泛运用于电商网站和移动应用中。

二、瀑布流的实现原理及源代码

那么瀑布流的效果如何用前端技术实现呢？本文采用比较基础的HTML+CSS+JavaScript技术实现。

1. HTML

HTML里面放的东西很简单，就是一个总的容器container里嵌套很多小容器box，里面又嵌套一个box-img，box-img里放图片。有人说，干嘛嵌套这么多层啊？这是因为这样做方便我们增添样式和操作。

<div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.jpg" alt="">
            </div>
        </div>
 <div>

2. CSS

CSS中主要是通过浮动让图片一行一行排列，然后控制容器之间的间距，加上边框和阴影。这里container采用相对定位，因为绝对定位会脱离文档流。

      * {
            margin: 0;
            padding: 0;
        }
        #container {
            position: relative;
        }
        .box{
            float: left;
            padding: 5px;
        }
        .box-img{
            width: 150px;
            padding: 5px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
        }
        .box-img img{
            width: 100%;
        }

3.JavaScript

实现瀑布流最关键的就是JS部分，利用JavaScript计算图片的位置和大小，然后将它们排列在正确的位置上，实现动态效果。

具体来说是第一行的图片不动，然后从第二行第一张图片开始，计算出第一行高度最小的图片，然后接在它下面，修改图片的上边距和左边距，图片绝对定位，最后更新图片的高度，如此循环往复。

window.onload = function() {
  imgLocation('container', 'box')
}

// 获取到所有要摆放的图片
function imgLocation(parent, content) {
  var cparent = document.getElementById(parent)
  // cparent 下的所有的第一层的子容器 box
  var ccontent = getChildElement(cparent, content) // [ 装了20个div ]

  // 从谁开始是需要被摆放位置的
  var winWidth = document.documentElement.clientWidth
  var imgWidth = ccontent[0].offsetWidth
  var num = Math.floor(winWidth / imgWidth)

  // 操作第 num+1 张图
  var BoxHeightArr = []
  for (var i = 0; i < ccontent.length; i++) {
    // 前num张只要计算高度
    if (i < num) {
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } else {
      // 我们要操作的box，把求最小值方法借给数组用
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = BoxHeightArr.indexOf(minHeight)
      
      ccontent[i].style.position = 'absolute'
      ccontent[i].style.top = minHeight + 'px'
      ccontent[i].style.left = (imgWidth * minIndex) + 'px'

      // 更新最矮的那一列的高度
      BoxHeightArr[minIndex] += ccontent[i].offsetHeight
    }
  }
}

// 取到父容器中的某一层子容器
function getChildElement(parent, content) {
  var contentArr = []
  var allContent = parent.getElementsByTagName('div') 
  // 遍历allContent 把其中类名为 content 的容器都存到contentArr数组中
  for (var i = 0; i < allContent.length; i++) {
    // 当前这个容器的类名是否为 content
    if (allContent[i].className == content) {
      contentArr.push(allContent[i])
    }
  }
  return contentArr
}

三、总结

瀑布流布局的主要优点是可以将大量内容呈现在一个页面中，从而提高用户体验和浏览效率。与传统的列表式布局不同，瀑布流布局的每个内容块大小不一，根据内容的高度自动排列，使得整个页面具有更好的美观性和趣味性。