javascript - Google+ 风格图片库

Question

我正在尝试模拟以下内容:

有什么想法吗？基本上所有照片都具有相同的高度，并且照片会动态排列/裁剪/调整大小以完美地适合行，因此左右两侧没有锯齿状。如果您调整浏览器窗口的大小，它也会调整照片的大小以适合。我已经尝试过 isotope 和 jquery masonry，但都没有给我这种效果。

Answer 1

我刚刚实现了这件事。这是我的做法:

1. 当页面加载时，我会测量目标容器(我的图像所在的容器)的可用宽度，并将其称为 maxWidth
2. 我进行 AJAX 调用，将 maxWidth 传递给服务器
3. 我确定要在服务器上显示的画廊图片列表，并逐张处理
4. 在我的列表迭代过程中，我不断向一行中添加图像，该行的长度是可用的 maxWidth(我放弃了)。一旦图像溢出 maxWidth，我计算溢出量
5. 我将溢出量除以我行中的图像数量，然后从行中的每张图像中减去该值(这样一张图像的宽度不会减少太多)
6. 我对每一行都重复这个，所以每一行加起来正好是 maxWidth

我必须考虑的一些事情:

1. 我必须考虑每张图片之间所需的边距宽度，并在处理每一行时将其计入 maxWidth 累加值。
2. 我们需要一个 Angular 戳图像(一个更大的图像并固定在左上角。这个图像包含两行，比我的其他缩略图更宽。我必须为前两行计算不同的 maxWidth因此。
3. 在调整浏览器大小时，我不得不重新计算尺寸。绑定(bind)到窗口的调整大小事件导致拖动期间多次调用 AJAX。我必须修复调整大小事件，以便它仅在完成时触发。

总的来说，图库效果很好。他是截图。