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事件，以便仅在完成后才触发。

总体而言，图库的表现非常好。 他是截图。