我想创建一个像 Google+“来自您圈子的照片”这样的画廊，其中的缩略图看起来像拼贴画。
- 缩略图保持照片的纵横比。
- 画廊行的高度接近(不相等但非常接近)。
- 缩略图之间的间距在任何地方都是相等的。
- 画廊填满了一个矩形。
- 照片未裁剪。它们只是调整大小以填充空间。
请看截图为例: http://ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg
我想了解如何使用 css/javascript/jquery 以编程方式在客户端设置这样的画廊缩略图样式。
感谢您的回答!
最佳答案
您可能会发现这篇文章很有帮助:Building a Google Plus Inspired Image Gallery
他使用了一种不需要对图像进行排序的技术，而且非常简单。基本上，一旦您知道缩略图行的宽度 W，就继续放置缩略图，直到总宽度超过 W。假设您超过 W 40 像素。现在，裁剪行中的每个缩略图(通过 css)以总共移除 40 个像素。
如果，比方说，你想从图像中裁剪 10px，你可以用这样的东西来做:
<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;">
<img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" />
</div>
overflow:hidden 裁剪图像，负边距基本上水平居中。
关于javascript - 使用可变大小缩略图制作照片库的最简单方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7125642/