瀑布流布局

组件：

    $.fn.layout = function(params){
        return this.each(function(){
            var options = $.extend({width:100,lineNum:3,defaultData:'had'},params),
                $self = $(this);
            var layout = {
                width : options.width,
                height : [],
                end : false,
                init : function(){
                    this.setHeightArray();
                    this.bind();
                    if(options.defaultData == 'had'){
                        this.append($self.children(),true);
                    }else{
                        this.getData();
                    }                
                },
                getData : function(){
                    var me = this;
                    if($self.next('.loading').length <= 0){
                        $self.after('<div class="data-loading loading"><span>加载更多数据</span></div>')
                    }
                    $self.next('.loading').show()
                    $.getJSON(options.url,{},function(d){
                        me.append(d.list)

                    },'json')                    
                },
                append : function(data,bool){
                    if(data.length > 0){
                       $self.next('.loading').hide() 
                       for(var i = 0 ,len = data.length; i < len; i++){
                            var d = $(data[i]),
                                height = 0;
                            if(!bool){
                                $self.append(d);
                            }
                            height = d.outerHeight(true);
                            var pos = this.getPos(height)
                            d.css({top:pos.top,left:pos.left}).fadeIn();
                            $self.height(pos.height);
                        }
                    }else{
                        $self.next('.loading').html('没有更多数据').show()
                        this.end = true;
                    }
                },
                setHeightArray : function(){
                    for(var i = 0; i < options.lineNum; i ++){
                        this.height.push(0)
                    }
                },
                getPos : function(height){
                    var min = Math.min.apply(null, this.height),
                        index = $.inArray(min,this.height),
                        left = index * this.width,
                        top = min;
                    this.height[index] = this.height[index] + height;
                    return {left : left , top : top, height : Math.max.apply(null, this.height)}
                },
                bind : function(){
                    var body = document.body,
                        doc = document.documentElement,
                        me = this;
                    $(window).on('scroll',function(){
                        if(me.end) return;
                        var scrollHeight = Math.max(body.scrollHeight,doc.scrollHeight),
                            scrollTop = Math.max(body.scrollTop,doc.scrollTop);
                            clientHeight = doc.clientHeight;
                        if(scrollHeight < scrollTop + clientHeight + 300){
                            me.getData()
                        }
                    })
                }

            }

            layout.init()
        })
    }

调用方式：

$(".list").layout({
　　width:200,//单列的宽度
　　lineNum:3,//一列展示几排
　　url:''
})