Google+的样式图片廊

Question

我想emmulate如下：

任何想法如何？基本上所有的照片都具有相同的高度，并且照片被动态地排列/裁剪/调整大小以适合行，所以没有锯齿状的边向左或向右。如果您调整浏览器窗口的大小，它也会调整照片的大小以适合。我已经尝试过同位素和jquery砌体，既不给我这种效果。

Answer 1

我只是实现这事。以下是我做的：

1. 页面加载后，我测量目标容器（容器在我的图像将实时）的可用宽度，并称之为maxWidth
2. 我做一个AJAX调用，传递maxWidth直到服务器
3. 我确定我的服务器上显示的图库列表，并逐一处理
4. 在我的列表迭代期间，我不断向一行添加图像，行的长度是maxWidth可用（我通过了）。一旦图像溢出maxWidth，我计算溢出量
5. 我将溢出量除以行中图像的数量，然后将该值从行中的每个图像中减去（这样一个图像不会“吨得到其宽度减少太多）
6. 我重复这对于每一行，所以每行加起来正好maxWidth

有些事情我不得不考虑：

1. 我必须考虑到考虑每幅图像之间我想要的边距的宽度，并将其纳入maxWidth中处理每一行时的累计值。
2. 我们需要一个角落戳图像（一个较大的图像，并固定在左上角，该图像包含两行，比我的其他缩略图宽，我必须计算前两行的不同maxWidth
3. 我不得不在重新计算浏览器尺寸时重新计算尺寸。绑定到窗口的resize事件会在拖动过程中导致多个AJAX调用，因此我必须修复resize事件，以便只在完成时才会触发

总的来说，图片库效果不错，他是一个截图。

Answer 2

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