原生瀑布流图片墙

* {
    padding: 0;
    margin: 0;
}
.main {
    width: 100%;
    position: relative;
    background: skyblue;
}
.boxs {
    width: 200px;
    border: 1px solid #000;
    padding: 5px;
    background: #ccc;
    position: absolute;
}
.boxs img {
    width: 100%;
}
.boxs h2,.box p {
    text-align: center;
}

<div class="main"></div>

// 记得要先引入Jquery.js
$(function () {
    //在页面显示出全部盒子
    var boxs=''
    for(var i=1;i<=70;i++){
        boxs+='<div class=\'boxs\'><h2>哈哈哈哈</h2><img src=img/'+i+'.jpg><p>为什么这么的难啊难</p></div>';
    }
    $('.main').html(boxs);
    var obj= {
        // 初始化
        init: function () {
            this.lie = Math.floor($('.main').width() / $('.boxs').outerWidth());
            this.space = ($('.main').width() - this.lie * $('.boxs').outerWidth()) / (this.lie + 1);
            this.gao = 15;
            this.arrXY=[];
            this.two();
        },
        two: function(){
            for(var i=0;i<this.lie;i++){
                var pos={
                    left:(i*$('.boxs').eq(i).outerWidth()+(this.space*(i+1))),
                    top: $('.boxs').eq(i).outerHeight()+this.gao*2
                }
                $('.boxs').eq(i).animate({
                    top:this.gao,
                    left:(i*$('.boxs').eq(i).outerWidth()+(this.space*(i+1)))
                },1000);
                this.arrXY.push(pos);
            }
            this.three();
        },
        three:function () {
            for(var i=this.lie;i<=70;i++){
                var index=this.getMinTop();
                $('.boxs').eq(i).animate({
                    left:this.arrXY[index].left,
                    top:this.arrXY[index].top
                },1000)
                this.arrXY[index].top+=$('.boxs').eq(i).outerHeight()+this.gao;
            }
        },
        getMinTop:function(){
            var mixHeight=this.arrXY[0].top;
            var index=0;
            for(var i=0;i<this.arrXY.length;i++){
                if(mixHeight>this.arrXY[i].top){
                    mixHeight=this.arrXY[i].top;
                    index=i;
                }
            }
            return index;
        }
    }
    obj.init()
    $(window).resize(function(){
        obj.init();
    })
})