<script type="text/javascript" src="jq.js"></script><style>#main-wrap{position: relative; margin:0 auto;}.item-box{ position:absolute;left:0;top:0;padding:10px 0 0 10px;margin-left:-5px;}.item-box .pic{border-radius:5px;padding: 10px;border:1px solid #ccc;box-shadow: #ccc 0 0 5px;}.item-box .pic img{width: 160px;height:auto;}.loading{ visibility:hidden;width:200px;height:45px; margin:30px auto; background-color:#ccc; text-align:center; line-height:45px;border:1px solid #eee;border-radius:5px;}</style>

/***瀑布流插件*本插件局域JQ*在每次数据初始化前必须在服务器端设置好图片区域的宽高，也就是说在图片的外包装DIV上按照比例设置上宽高属性*才能顺畅的运行在各个浏览器(因为图片在没有加载完毕前是没有宽高的)*name:杨永*QQ:377746756*/;(function($){    //构建瀑布流构造函数    var WaterFlowlayout=function(iTarget,loading,settings) {        //保存自身        var _this_=this;        //初始配置参数        this.opts={                  colSize:5                  };        //如果配置了参数就扩展        settings&&$.extend(this.opts,settings);        //保存瀑布流容器、初始出现在容器里面的盒子、其中一个盒子的宽度        this.insertBox=iTarget;        this.insertBoxW=this.insertBox.width();        this.itemBoxs=this.insertBox.find(".item-box");        this.colW=this.itemBoxs.eq(0).outerWidth();        //保存钩子loading加载状态        this.loading=loading;        this.isLoad=true;        this.winHeight=$(window).height();        this.scrollTop=$(document.documentElement).offset().top||window.pageYOffset;        this.timer=null;        //初始化一下        this.init();        //绑定窗口事件        $(window).scroll(function(){            _this_.scrollTop=$(document).scrollTop();            _this_.isLoadingStatus();        }).resize(function(){            _this_.winHeight=$(window).height();            _this_.isLoadingStatus();        });    };    WaterFlowlayout.prototype={        isLoadingStatus:function(){//判断loading是否出现在视口中            var self=this;            window.clearTimeout(self.timer);            self.timer=window.setTimeout(function(){                if(self.isLoad){                    if(self.loading.offset().top<(self.winHeight+self.scrollTop)){                        self.isLoad=false;                        self.loading.css("visibility","visible");                        self.opts.callBack&&self.opts.callBack();                    }else{                        self.loading.css("visibility","hidden");                    };                };            },300);        },        reloadView:function(dataList){//刷新新添加进来的元素            var self=this;            //创建一组数据到里面            self.createItems(dataList);                //设置下容器的宽高            self.setInsertBoxHeight(self.colsArr);            //渲染完成后可以加载            self.isLoad=true;            self.loading.css("visibility","hidden");        },        createItems:function(dataList){            var self=this;                self.createArr=[];           /*<div class="item-box"><div class="pic"><img src="http://www.mamicode.com/images/10.jpg"></div></div>*/            $(dataList).each(function(i, elem) {                var itemBox=$(‘<div class="item-box" style="display:none;">‘);                    itemBox.html(‘<div class="pic" style="width:‘+elem.width+‘px;height:‘+elem.height+‘px"><img src="http://www.mamicode.com/‘+elem.src+‘"></div>‘);                self.createArr.push(itemBox);                self.insertBox.append(itemBox);            });            //设置位置            $(self.createArr).each(function(i,elem){                elem.fadeIn();                self.setOtherPos(self.colsArr,elem);            });        },        init:function(){//设置容器的宽度、居中            var self=this;            //记录一下几列            this.colSize=Math.floor(this.insertBoxW/this.colW);            //设置一个数组记录            this.colsArr=[];                        //将前8个元素高度插入到数组中            this.itemBoxs.each(function(i,elem){                if(i<self.colSize){//添加到数组中                    self.colsArr.push($(elem).outerHeight());                    $(elem).css({left:i*self.colW,top:0});                }else{                    //设置剩余的元素位置                    self.setOtherPos(self.colsArr,$(elem));                };            });            //设置下容器的宽高            self.setInsertBoxHeight(self.colsArr);            self.insertBox.width(self.colW*self.colSize);        },        setOtherPos:function(colArr,curElem){            //获取最小的值            var minV=Math.min.apply(null,colArr);            var index=this.getIndex(colArr,minV);            curElem.css({                        top:minV,                        left:index*this.colW                        });            //重置一下原来的值            colArr[index]+=curElem.outerHeight();        },        getIndex:function(arr,val){//匹配数组中最小的值            for(var i=0;i<arr.length;i++){                if(arr[i]==val){return i;break;};            };            },        setInsertBoxHeight:function(arr){            //设置一下容器的高度            this.insertBox.height(Math.max.apply(null,arr));        }    };    //注册到全局对象上    window.WaterFlowlayout=WaterFlowlayout;})(jQuery);

<div id="main-wrap">    <div class="item-box">        <div class="pic">            <img src="images/1.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/2.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/4.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/5.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/6.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/1.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/7.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/8.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/9.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/10.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/11.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/12.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/10.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/3.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/4.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/5.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/6.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/1.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/7.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/8.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/9.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/10.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/11.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/12.jpg">        </div>    </div>    <div class="item-box">        <div class="pic">            <img src="images/10.jpg">        </div>    </div></div><div id="loading" class="loading">正在加载中...</div>

var demo=new WaterFlowlayout($("#main-wrap"),$("#loading"),{                                          callBack:function(){                                                          //新加载的数据                                                        demo.reloadView([                                                                    {src:"images/16.jpg"},                                                                    {src:"images/17.jpg"},                                                                    {src:"images/18.jpg"},                                                                    {src:"images/19.jpg"},                                                                    {src:"images/20.jpg"},                                                                    {src:"images/16.jpg"}                                                                ]                                                        );                                                  }                                          });