Simply using this algorithm and also having the layout being responsive requires running it on every window resize. However, you don't need consistent row heights for the layout to look good, and laying out photos one by one, deciding whether to add the current photo to the last row or create a new one leads to a good enough solution. Their observation was that you can't build a photo grid with a consistent row height, while also accomodating a collection of photos with arbitrary aspect ratios and in an arbitrary order. I based my solution on their algorithm, but I won't go into details of how it works. Flicker open-sourced their algorithm for creating the photo grid on their website and wrote a blog post about it here. This layout was popularised by apps such as flickr and 500px. However, making this layout responsive, fast and with no javascript at runtime required a few tricks. I like how this layout creates a brick-wall pattern, accomodating both landscape and portrait photos and keeping straight rows and a left-to-right focus. The photos should have some space between them, let's say 10 pixels.Īs for the layout, we want the photos to be displayed in something that could be called a staggered horizontal grid, meaning a variable number of photos per row. We also want this grid to be responsive, meaning that on wider devices it shows multiple photos, while on mobile phones it shows one or a maximum of two photos per row. We want to display multiple photos in something similar to feed, with multiple photos per row.
To see the result, check out my photography page. In this post, I describe the way I implemented such a layout. It turns out displaying photos of different aspect ratios in a grid is not that simple and there are a few trade-offs that have to be made. When I set to build a webpage for my photography, laying out the photos in a grid was the biggest challenge.
0 kommentar(er)
