浮动缩略图库，大小不一，如何处理？

Posted 2023-03-06

【中文标题】浮动缩略图库，大小不一，如何处理？

【英文标题】：Floated thumbnail gallery, different sizes, how to handle?

【发布时间】：2011-10-09 07:53:23

【问题描述】：

当简单地对所有相同大小的缩略图执行 float:left 时，画廊看起来很棒。但是当不同大小的缩略图开始播放时，情况就不再如此了。

处理不同尺寸缩略图的最佳方法是什么？我需要改用表格吗？

【参考方案1】：

对于那些在 2017 年寻找不同尺寸图片库的人，请查看这篇 css-tricks 文章：https://css-tricks.com/seamless-responsive-photo-grid/

【参考方案2】：

我用过以下插件，效果很好：

http://suprb.com/apps/gridalicious/

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。

【参考方案3】：

我认为最好的解决方案是给每个缩略图一个固定大小的 div 容器，以便每个缩略图占用相同的空间。我的意思是，不要调整缩略图的大小。 div中的图片应该居中。

【参考方案4】：

没有一个可能的 CSS 解决方案看起来特别好。

我建议改用 javascript+jQuery，特别是以下插件之一：

http://masonry.desandro.com/ http://isotope.metafizzy.co/

【讨论】：

这些插件真的很棒