自己封装的瀑布流插件，含最详细注释，简单易懂。

基于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(indexarr[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

下面调用演示:

dom模板：

      

         
          

              
              
花非花，雾非雾，夜半来，天明去，来如春梦不多时。
          
      
  
    
  

js部分：

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