Sites like google image search display images of varying width in rows. Apparently, they select which images to group together, and which images to make a bit smaller, in order to achieve a fairly even spacing between the images.
I tried to search online for a library that implements such an algorithm.
I am asking here if anyone knows of such a solution and if not, I could use some pointers on how to write this code myself.
UPDATE: I found photowall using jquery. this seems to be the answer. I am currently searching for an angular.js directive
There is the library Masonry (the one mplugjan also mentioned). This library is very flexible in the way you can set up a grid. See their options page.
If you want to do it your self, you have roughly two options:
Google Images give their images a max height, which allows them to creates rows, and position the images inside them.
The other option is to create columns of a fixed with and place the images in these columns. This option, however is a bit harder to implement, because you have to think harder about the order in which the images are placed.
Edit: After a quick look at Photowall, it seems that Masonry is more flexible. The documentation on the Masonry site show far more examples in mixing various heights/widths.