Layout Algorithms: Facebook | Google Plus | Lightbox | Lightbox Android | 500px

Google Plus has a really nice image gallery. They somehow managed to display all the photos without cropping, without reordering and without any holes. We are going to see how they did it in this blog post.

How does it work?

Here we have three images with various sizes and aspect ratio and we want to display them in the page. The layout algorithm is the consequence of one clever trick: all the images of the same row are have the same height.

So the only unknown is H, the height of the row given the three images we want to show. Using some basic math, we can solve the problem!

So now we know how to calculate H, the height of all the images. Since we want to keep aspect ratio, we can also calculate their width. As you can see, it is trivial to generalize the operation to n images.

How many images?

Now the tricky part is to decide how many images we want to put in the row. I came up with a solution that gives similar results to Google Plus but I'm not 100% sure that's how they do it.

One fact you can observe is the fact that few images leads to a huge row while many images lead to a small row.

So the idea is to try adding one image at a time and have a threshold for the maximum height we want. Once the row is smaller than this threshold, we render it!

Conclusion

Check this other article to find where best to place the breaks.
Check out the Demo! Here's a little Pro/Con to know if this technique will fit your needs.

Pros:

  • No cropping
  • No reordering
  • No holes
  • Arbitrary Width

Cons:

  • Portrait images are much smaller than landscape ones
  • All the rows do not have the same height
  • The view feels a bit chaotic with no clear structure
  • Requires dynamic resize of images

Some other implementations I found on the internet:

If you liked this article, you might be interested in my Twitter feed as well.
 
  • Wcchok

    Do you need jquery plugin in your G+ example?

  • Vojtech Sefler

    Hi, if I try to put images into fixed-width div, your script doesn't work... http://sefler.cz/test/abc.htm How can I fix it please?

  • Ludovic

    NIce code but is it possible to add 10px margins between photographs like Google ?

  • http://www.facebook.com/vjeux Christopher Chedeau

    Yes you can, look at the demo to see how to do it: http://blog.vjeux.com/wp-content/uploads/2012/05/google-layout.html

  • Arnaud

    Merci pour l'article, très clair et lisible. Cela m'a pas mal aidé pour un algorithme de création de mur de photos.

    Continues comme ça !

  • http://twitter.com/mhm72 Mark Howells-Mead

    THANK YOU so much 🙂

  • Wta

    Does anyone know of a program or Photoshop plugin that will take a folder of photo image files and the create a single image file with all the images?

  • SARAH

    Thank you! I'm now trying to display the images correctly with infinite scrolling, but I can't; I use jquery infinitescroll.js in other parts of the website and I suppose there are also other forms to make the infinite-scroll...

  • Ibrahim

    where do the img come from? are they fetch from a php script

  • Aaron Cohn

    Thanks so much for sharing this. I spent a lot of time studying the method and the code, and it was really helpful. There are still a couple of things I don't understand, though. A couple of magic numbers in the code that aren't quite clear to me.

    First, in your "run" function, you subtract 50 from window.innerWidth. I noticed that the images don't line up in a nice grid anymore if you subtract a small number, but I don't understand why. What's the reason for that subtraction?

    Second, in the getHeight function, you multiply the number of images by 5, and then subtract that from the width. My initial thought was that this accounts for the 5px or so gap between images when they're displayed on screen, but I wasn't sure. Could you clarify that for me?

    Thanks!

  • Eric

    I studied this code too, very helpfull indeed.

    For what i understood the subtract of 5px is the total right and left margin for 1 image

    For the 50 substacted, it is look like an "error margin" to prevent photos to return to the next row.

    I think the best solution to correct that is to add css properties font-size:0px to the body or your gallery container. Then do not anymore subtract the 50 number.

    😀

  • Aaron Cohn

    Yeah after I paid closer attention I noticed that the last image would get pushed to the next row if that "error margin" was removed. What does the font size have to do with it? I initially thought it might be something to do with the width of the scroll bar, but I'm a newb at CSS.

  • Eric

    Font-size:0px remove the littles spaces between images
    i am right, you can have the same result with display : inline on each images.

  • César Bolaños

    May anybody help me out to know where this plugin is and how to use it? Thanks in advance.

  • eric socolofsky

    stumbled across this article and figured it's worth sharing how we do it at Flickr: http://code.flickr.net/2015/03/24/much-photos/

  • Zak Stark

    Excellent explanation and great example code. I'm trying to use it myself but can't get it working. Possibly silly quesstion but does each image require a data-width and data-height tag?

  • Florian Haar

    Is there any idea to do things like this for winrt with Xaml and c#?

  • Lorenzo Herrera

    I've created a jQuery plugin that does precisely this! http://jquery-mosaic.tin.cat

  • Sebastián Lara

    @disqus_CA9R1XpEr9:disqus I test your plugin and it's awensome! But I couldn't found the way to add new images dinamycally (infinite scroll for example). Can I do it using your plugin, I have been reading the documentation but I couldn't found it. Thanks in advanced.

 

Related Posts

  • July 8, 2012 Image Layout Algorithm – Lightbox (1)
    Layout Algorithms: Facebook | Google Plus | Lightbox | Lightbox Android | 500px Lightbox.com has a really interesting image layout algorithm. We're going to see how it works and its best use case. How does it work? Column based The algorithm is column based. You pick a […]
  • August 13, 2012 Image Layout Algorithm – Facebook (1)
    Layout Algorithms: Facebook | Google Plus | Lightbox | Lightbox Android | 500px For the redesign of the Photo Section of Facebook we wanted to highlight some photos by making them bigger. It all started with the following mock by Andy Chung: Layout Alternated Blocks My […]
  • September 22, 2011 URLON: URL Object Notation (43)
    #json, #urlon, #rison { width: 100%; font-size: 12px; padding: 5px; height: 18px; color: #560061; } I am in the process of rewriting MMO-Champion Tables and I want a generic way to manage the hash part of the URL (#table__search_results_item=4%3A-slot). I no longer […]
  • August 14, 2012 Image Layout Algorithm – Facebook – Reordering (2)
    In this article, we are going to see how to support dynamic updates to Facebook Image Layout Algorithm. Beware, this is not an easy task and there are many special cases to handle :) Making images bigger To make images bigger we just run the algorithm all over again with the new […]
  • July 7, 2012 CSS – Understanding Percentage Background Position (9)
    In this article, I'm going to guide you through a concrete problem I had to solve. Eventually, we'll see how to use percentage values in the background-position CSS property and how it solves a lot of tough issues. Usual way Positioning the image The usual way to position images […]