实现瀑布流WaterFlow

瀑布流

所谓“瀑布流布局”就是动态根据组件的大小来放置组件，一般会把width固定

核心实现

1. 根据组件的大小计算每个组件的位置
   1. 父组件开启绝对定位 position: abosolute
   2. 根据每个组件的width和父组件的width来计算每一行放多少个组件
   3. 根据每一行放多少个组件来创建一个对应长度的数组：nextYs = [0, 0, ...]。每个元素代表下一个组件的纵坐标从哪里开始
   4. 对于每一个需要放置的组件：
      1. 找到其要放置的列indexX = minarg(nextYs)的下标（也就是确定放置在哪一列），此刻可以确定放置组件的x坐标值
      2. 那么y坐标值也就出来了：y = nextYs[indexX]
      3. 最后更新一下nextYs以便后续操作

难点

当containerWidth < singleWidth的时候，所有图片实时使image.style.width === containerWidth，并且实时获取最新的clientHeight

• 解决方法：根据图片宽高的百分比计算出真实的height
• 缺点：如果不是图片的话，就无法这样做【待后续更新】