Google+样式图片库

Question

I'm trying to emmulate the following:

Any ideas how? Basically all photos have the same height and photos are arrange/cropped/resized dynamically to fit perfectly on rows so there are no jagged sides left or right. If you resize the browser window it resizes the photos as well to fit. I have tried isotope and jquery masonry and neither give me this effect.

Answer 1

在这种情况下，流体网格系统将为您提供帮助： http : //twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Answer 2

I just implemented this very thing. Here's how I did it:

1. When the page loads, I measure the available width of the target container (the container where my images will live), and call this maxWidth
2. I make an AJAX call, passing the maxWidth up to the server
3. I determine my list of gallery images to display on the server, and process each one by one
4. During iteration of my list, I keep adding images to a row, the row's length being the maxWidth available (which I passed up). Once an image overflows the maxWidth, I calculate the overflow amount
5. I take that overflow amount, divide it by the number of images in my row, and subtract that value off each of the images in the row (so one image doesn't get its width reduced too much)
6. I repeat this for each row, so each row adds up to exactly maxWidth

Some things I had to consider:

1. I had to take into account the width of the margins I wanted in between each image, and factor that into the maxWidth accumulated value when processing each row.
2. We needed a corner stamp image (an image that was larger and was fixed in the top left corner. This image encompassed two rows, and was wider than my other thumbnails. I had to calculate a different maxWidth for the first 2 rows as a consequence.
3. I had to recalculate the dimensions when the browser was resized. Binding to the resize event of the window caused multiple AJAX calls during dragging. I had to fix the resize event so it only fired when done.

Overall, the image gallery turned out quite well. He's a screenshot.