Google Images heterogeneous Thumb Positioning - html

Question

Google Image Search returns Images of different sizes. even their Thumbs are of different size. But still they are arranged in such a way that keeps a clean margin. even resizing the browser keeps the left and right alignment proper. What I've noticed is they group a Page of Image into an ul and each image is in an li. not all rows contain same amount of images. But still how they manage to keep images of different sizes properly aligned ?
EDIT
Though I've accepted an answer Its not exact match. It may be a near match. However I still want to know What is the exact procedure they are doing. I cannot chalk out the pattern.
It seems that they wrap a page in a <ol> and put images in <li> But when I resize the images are redistributed among pages. But how many images the page <ol> should contain now is to be decided. What procedure can be used to accomplish that ? and also images are resized based on a standard height I think. and that standard height is changed on resize. How how much ? how that is decided ?

Answer 1

It's not exactly the same thing, but you might get some useful ideas about how to optimize image "packing" by looking at the approach taken by the jQuery Masonry plug-in.

Answer 2

They know how big each thumbnail is, since it's stored in their image database. They just make each <li> float left, and make them a fixed size based on whatever the largest image is within that section of images.

Answer 3

I've written a little plugin just to do that HERE you can watch it in action:
(function($){
//to arrange elements like google image
//start of the plugin
var tm=TweenMax;
var positionFunc= function(options, elem){
var setting=$.extend({
height:150,
container:$('body'),
margin:5,
borderWidth:1,
borderColor:'#000',
borderStyle:'solid',
boxShadow:'0 0 0 #000',
borderRadius:0,
type:'img'
},options);
tm.set($(elem),{
'max-height':setting.height
});
$(elem).wrap('<div class="easyPositionWrap"></div>');
var winsize=setting.container.width();
var thisrow=0;
var elementsused=0;
var row=0;
tm.set($('.easyPositionWrap'),{
border:setting.borderWidth+'px '+setting.borderStyle+' '+setting.borderColor,
borderRadius:setting.borderRadius,
boxShadow:setting.boxShadow,
margin:setting.margin,
height:setting.height,
position:'relative',
display:'block',
overflow:'hidden',
float:'left'
});
$('.easyPositionWrap').each(function(index, element) {
if(thisrow<winsize){
thisrow+=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
else{
var currentwidth=thisrow-$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').width()-(setting.margin*2)+(setting.borderWidth*2);
var nextimagewidth=$(this).prev('.easyPositionWrap').width()+(setting.margin*2)+(setting.borderWidth*2);
var elems=$(this).prevAll('.easyPositionWrap').length-elementsused;
var widthtobetaken=(nextimagewidth-(winsize-currentwidth))/(elems);
if(widthtobetaken!=0){
if(elementsused==0){
$(this).prevUntil('.easyPositionWrap:eq(0)').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
$('.easyPositionWrap:eq(0)').width($('.easyPositionWrap:eq(0)').width()-widthtobetaken);
$('.easyPositionWrap:eq(0) '+setting.type).css('margin-left','-'+(widthtobetaken/2)+'px');
}
else{
$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
}
}
elementsused+=elems;
thisrow=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
});
$(window).resize(function(){
clearTimeout(window.thePositionTO);
window.thePositionTO=setTimeout(function(){
$(elem).each(function(index, element) {
$(this).unwrap('.easyPositionWrap');
$(this).data('easyPositioned',false);
});
$(elem).easyPosition(options);
},200);
});
}
$.fn.easyPosition= function(options){
if($(this).data('easyPositioned')) return;
positionFunc(options, this);
$(this).data('easyPositioned',true);
};
//end of the plugin
}(jQuery));
$(window).load(function(){
$('img').easyPosition();
});
libraries to include:
jQuery
GreenSock's TweenMax