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;
}