基于jquery的插件fn相当于prototype,下面开始封装。

$.fn.waterFall=function (option) {   //option  用户传过来的{gap:15}

    var defaults = {gap:20} //默认值

    defaults = $.extend(defaults,option);  //如果用户传参数，以用户为准合并

    var _this = $(this); //_this就是最父级，装载图片和文字的盒子

    var allItem = _this.children('.item');  //获取父级下每一个的 元素

    var itemWidth = allItem.width(); //获取每一个item的宽度

    var count = Math.floor(_this.width()/(itemWidth+defaults.gap)); //向下取整，算出每一行最多可放的列数

    var arr = []; //创建一个空数组，方便存储每一列的高度

    allItem.each(function (index,ele) {  //遍历每一个item
        if(index<count){  //如果不够占满一列
            $(ele).css({  //遍历所有的元素 给每一图片设置坐标值
                top:0,
                left:(itemWidth+defaults.gap)*index+'px'  //所有元素的left坐标 left= (item的宽度+defaults.gap)* index （列数-1）
            })
            arr[index] = $(ele).height()
        }else {  //如果有多行
            // 第二行以下 添加的规律：找出高度最小的列，往这个后面追加图片
            var minHeight = arr[0]; //最小值
            var minkey = 0;  //记录最小的高度所在的列数
            var i =0,l=arr.length;
            for(;i<l;i++){
                if(minHeight>arr[i]){
                    minHeight=arr[i];
                    minkey = i
                }
            }

            var height = $(ele).height()
            $(ele).css({
                'top':minHeight+defaults.gap+'px',
                'left':minkey*(itemWidth+defaults.gap)+'px' //从第二行开始最小的高度
            })

            //动态更新最小列的高度
            arr[minkey]+=height+defaults.gap
        }
    })

    //算出所有列的高度，给外层父元素加上。

    var maxHeight = arr[0];

    for(var i =0;i<arr.length;i++){
        if(maxHeight<arr[i]){
            maxHeight=arr[i]
        }
    }

    _this.height(maxHeight)
}

下面调用演示:

dom模板：

<div class="wrapper">
      <div class="items">
         <!-- 此处请多个item -->
          <div class="item">
              <img src="./images/1.jpg" alt="">
              <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时。</p>
          </div>
      </div>
  </div>    
  

js部分：

$('.items').waterFall({gap:15});