瀑布流布局原理：

• 每列宽度宽度一致
• 根据父容器宽度和列宽计算列数。
• 每个节点依次放在当前高度最小的列下面
• 父容器高度取当前高度最大的列的高度

伪代码如下：

<script>
  var colCount   //定义列数
  var colHeightArry= []   //定义列高度数组
  var nodeWidth = $(node).outerWidth(true)   //单个节点的宽度

  colCount = parseInt($(parentContainer).width()/nodeWidth)   //计算出列数
  for(var i = 0 ; i < colCount; i ++){
    colHeightArry[i] = 0
  }

  function(循环每个节点){
    //找出当前最小的列高和列
    var minValue = colHeightArry[0]  
    var minIndex = 0 
    for(var i = 0 ; i < colCount; i ++){
      if(colHeightArry[i] < minValue){   //如果最小高度组数中的值小于最小值
        minValue = colHeightArry[i]   //那么认为最小高度数组中的值是真正的最小值
        minIndex = i  //最小下标为当前下标
      }
    }

    $(this).css({
      left: minIndex * imgWidth,
      top: minValue
    })
    colHeightArry[minIndex] += $(this).outerHeight(true);
    $(parentContainer).css(width, Math.max.apply(null, colHeightArry))
  })

</script>