Google+风格图片库

Question

我正在尝试以下方式：

任何想法如何？基本上所有照片都具有相同的高度，动态排列/裁剪/调整照片以完美地适合行，因此左右没有锯齿状的边。如果您调整浏览器窗口的大小，它也会调整照片的大小以适应。我尝试过同位素和jquery砖石，但都没有给我这种效果。

Answer 1

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

Answer 2

我刚刚实现了这一点。我是这样做的：

1. 当页面加载时，我会测量目标容器的可用宽度（我的图像所在的容器），并调用此maxWidth
2. 我进行了一次AJAX调用，将maxWidth传递给服务器
3. 我确定要在服务器上显示的图库图像列表，然后逐个处理
4. 在列表的迭代过程中，我不断添加图像到一行，行的长度是maxWidth（我放弃了）。一旦图像溢出maxWidth，我就会计算溢出量
5. 我取出溢出量，除以行中的图像数量，然后从行中的每个图像中减去该值（因此一个图像的宽度不会减少太多）
6. 我为每一行重复此操作，因此每行加起来恰好是maxWidth

我必须考虑的一些事情：

1. 我必须考虑每个图像之间所需边距的宽度，并在处理每一行时将其计入maxWidth累积值。
2. 我们需要一个角落图章图像（图像较大并固定在左上角。此图像包含两行，并且比我的其他缩略图更宽。我必须为前两行计算不同的maxWidth结果。
3. 我不得不在调整浏览器大小时重新计算尺寸。绑定到窗口的resize事件会在拖动期间导致多个AJAX调用。我不得不修复resize事件，所以它只在完成后才会被触发。

总的来说，图片库结果非常好。他是截图。