web ，照片墙，瀑布流照片，非常简单，已封装轻量级，可优化，基于jquery，传入数据即可使用

代码开始

css部分

		@keyframes bounceIn {
            100% {
                transform: scale(1.07);
            }
        }
        .box{width:700px;height:2000px;position:relative;}
        .box img{animation: bounceIn 1s ease-in 2 alternate;}

html部分

	<div class="box">

    </div>
    <script src="./static/jquery2.1.4.min.js"></script>

js部分

		function CatCreateWaterFall(o){
            this.dom = $(o.dom);
            this.columns = o.columns;
            this.data = o.data;
            this.width = this.dom.width();
            this.height = o.height;
            this.itemWidth = this.width/this.columns;
            this.init();
            var that = this;
            setTimeout(() => {
                that.fall();
            }, 1000);
        }
        CatCreateWaterFall.prototype.init = function(){
            var that = this;
            for(let i = 0;i<that.data.length;i++){
                var img = new Image();
                img.src = that.data[i];// 根据数据结构不同，这里可能会更改  eg： that.data[i].path
                $(img).appendTo(that.dom);
                // if(i==that.data.length-1){img.onload = function(){
                // 	setTimeout(that.fall(),2000)
                // }}
            }
        }
        CatCreateWaterFall.prototype.fall = function(){
            var that = this,arr = [];
            this.dom.find("img").each(function (i) {
                var height = $(this).height();
                var width = $(this).width();
                var bi = that.itemWidth / width;
                var boxheight = parseInt(height * bi);
                if (i < that.columns) {
                    $(this).css({
                        width:that.itemWidth,
                        top: 0,
                        left: (that.itemWidth) * i,
                        position:"absolute"
                    });
                    arr.push(boxheight);
                } else {
                    var minHeight = arr[0];
                    var index = 0;
                    for (var j = 0; j < arr.length; j++) {
                        if (minHeight > arr[j]) {
                            minHeight = arr[j];
                            index = j;
                        }
                    }
                    $(this).css({
                        width:that.itemWidth,
                        top: arr[index],
                        left:that.dom.find("img").eq(index).css("left"),
                        position:"absolute"
                    });
                    arr[index] = arr[index] + boxheight;
                }
            });
        }

使用（js）

		let o = {
            dom:".box",
            columns:3,
            data:["./resources/01.jpg","./resources/02.jpg","./resources/03.jpg","./resources/04.jpg","./resources/05.jpg","./resources/06.jpg","./resources/07.jpg"],
            width:700,
            height:2000,

        }
        new CatCreateWaterFall(o);
        // var water = new CatCreateWaterFall(o);

补充

    超轻量级，根本不需要懂逻辑，用就行，适合新手，优化的话 fall 方法或者 init 方法都行。
    ~~ 欢迎一键三连哦! ~~