new google images how do they float correctly

Question

Has anyone seen the new google image search. It manages to make the images float in an area. the images fit into this correctly by grouping them in the sizes.

Frog images

I guess there are two ways of doing this:

• Scripting by some sort of rule involving the widths and heights of these images
• A Css rule for creating the images.

In a scripting scenario we could use a max width of 1000px then group up images to fill this 4 times for our 4 lines of images.

The Css rule would have to make the images float but also re order them.

Does anyone have any other ideas on how this would work?

Answer 1

They re-size images with canvas js. Then set li width, height and then add overflow hidden. You also can get same result if you set width on all your images in css img.myimg {width:70px}. I don't think it will take longer to render the page then using js code.