瀑布流的原理

瀑布流的排序：
每张图片的宽度是一致的
从左往右进行排序，第一排放不下则从第二排从新开始排列
第二排或者往后的每排图片放置的位置为上一排高度最小图片的下面依次排放

图片的位置摆放
图片位置的摆放大致可以不添加样式一次放置
通过设置成块级元素，进行摆放
通过绝对定位来进行摆放

$(function(){
    var colCount   // 列数
    var colHeightArray = []  //列高度的空数组
    var imgWidth = $('.waterfall img').outerWidth(true)
    console.log(imgWidth)
                              //outerWidth(true) 表示元素所占用的全部的大小 左右边距等
    colCount = Math.floor($('.waterfall').width()/imgWidth)
    console.log(colCount)
    for(var i=0;i<colCount;i++) {
        colHeightArray[i] = 0
    } // 数组初始化为0 
    $('.waterfall img').on('load',function() {
        // console.log($(this));    
            var minValue = colHeightArray[0]
            var minIndex = 0
            for(var i=0;i<colCount;i++) {
                if(colHeightArray[i]<minValue) {
                    minValue = colHeigh