效果圖：

可以看到，除了第一行，接下來的圖片都是新增在高度最低的那一列下面。

因此我用了一個數組heightArr存放每一列的高度，每次選擇高度最低的那列進行插入，隨後更新當行列的高度。

css：

 .box{
        position: relative;
        margin: 0 auto;
    }
    .item{
        position: absolute;
        width: 200px;
        margin: 5px;
        border: 1px solid #ddd;
        transition: all 1s;
    }
    .item img{
        width: 100%;
        height: 100%;
    }
 

html：

 <div class="box">
        <div class="item"><img src="img/0.jpg"/></div>
        <div class="item"><img src="img/1.jpg"/></div>
        <div class="item"><img src="img/2.png"/></div>
        <div class="item"><img src="img/3.jpg"/></div>
        <div class="item"><img src="img/4.jpg"/></div>
        <div class="item"><img src="img/5.gif"/></div>
        <div class="item"><img src="img/6.jpg"/></div>
        <div class="item"><img src="img/7.jpg"/></div>
        <div class="item"><img src="img/8.jpg"/></div>
        <div class="item"><img src="img/9.jpg"/></div>
        <div class="item"><img src="img/10.jpg"/></div>
        <div class="item"><img src="img/bg1.jpg"/></div>
        <div class="item"><img src="img/bg2.jpg"/></div>
        <div class="item"><img src="img/bg3.jpg"/></div>
        <div class="item"><img src="img/bg4.jpg"/></div>    
    </div>
 

JQ:

$(function(){
    init();
    $(window).on('resize',function(){//重新載入
        init();
    });
})

function init(){
    var boxWidth=$(".item").outerWidth(true);
    // 獲取每個小盒子的寬度 包括margin、padding、border
    var cols=parseInt($(window).width()/boxWidth);
    // 獲取列數
    var heightArr=[];
    for(var i=0;i<cols;i++){
        heightArr.push(0);
    };

    //遍歷每一張圖片
    $(".item").each(function(index,item) {
        var idx=0;
        var minBoxHeight=heightArr[0];
        // 獲取最小高度
        for(var i=0;i<heightArr.length;i++){
            if(heightArr[i]<minBoxHeight){
                minBoxHeight=heightArr[i];
                idx=i;
                // 獲取最小高度的索引
            }
        };

        // 設定圖片的樣式
        $(item).css({
            left:boxWidth*idx,
            top:minBoxHeight
        });
        heightArr[idx]+=$(item).outerHeight(true);

    });
};