瀑布流布局

组件：

    $.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:''
})