Tengo la siguiente galería de imágenes, que las muestra según su tamaño, y requiero hacer que al ultimate queden alineadas (Como en la parte superiror, una recta). Alguna thought de como hacerlo?

$(window).on('load',operate(){
waterFall();
var dataInt={"knowledge":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
$(window).on('scroll',operate(){
    if(checkScrollSlide()){
        $.every(dataInt.knowledge,operate(key,worth){
            var oBox=$('<div>').addClass('field').appendTo($('#predominant'));
            var oPic=$('<div>').addClass('pic').appendTo(oBox);
            $('<img>').attr('src','photographs/'+$(worth).attr('src')).appendTo(oPic);
        });
        waterFall();
    }
});
});

operate waterFall() {
   var $boxs=$('#predominant>div');
   var w=$boxs.eq(0).outerWidth();
   var cols=Math.ground($(window).width()/w);
   $("#predominant").width(w*cols).css('margin','Zero auto');
   var hArr=[];
   $boxs.every(operate(index,worth){
    var h=$boxs.eq(index).outerHeight();
    if(index<cols){
        hArr.push(h);
    }else {
        minH=Math.min.apply(null,hArr);
        var minHeightIndex=$.inArray(minH,hArr);
        $(worth).css({
            'place':'absolute',
            'prime':minH+'px',
            'left':minHeightIndex*w+'px'
        });
        hArr[minHeightIndex]+=$boxs.eq(index).outerHeight();
    }
 });
}

operate checkScrollSlide() {
   var $lastBox=$('#predominant>div').final();
   var lastBoxDis=$lastBox.offset().prime+Math.ground($lastBox.outerHeight()/2);
   var scrollTop=$(window).scrollTop();
   var documentH=$(window).peak();
   return (lastBoxDis<scrollTop+documentH)?true:false;

}