PHP：具有不同宽度的动态图像网格

Question

在我的网站上，我有多个具有相同高度但具有三种不同宽度的图像。我想在一个漂亮的网格中显示这些。上传图片时，我会检查图片是宽还是高。

然后我有三种不同尺寸的图片 s, m & l

s 用于高图像，m & l 用于宽图像。

这些图像显示在表格中，其中小 (s) 图像占 1 个点，中 (m) 占 2 个点，大 (l) 占 3 个点。每行有 3 个点。

如果我可能有 8 张图片（4 高，4 宽），我希望它看起来像这样（w = 空白）：

sss
ms
l
l
l

而不是

sss
sww
l
l
l
l

这意味着前 3 张图片只是小图片。因为我需要第二行的中等图像，所以我拉伸其中一个宽图像以占据 2 个点。然后在那个旁边有一个高的图像，最后三行只是三个宽的图像，每行一个。

我希望我解释得足够清楚。

编辑：

或者假设我有 4 张图片 2 高 2 宽（w = white-space）：

而不是像这样显示它

ssw
l
l

我希望它看起来像这样：

sm (or ms)
sm (or ms)

我该如何进行这项工作？

Answer 1

这有几个库，最简单的是jQuery Masonry。

你可以用最少的代码实现你想要的，因为它只是可变宽度而不是可变宽度和高度，但不妨使用已经处理这个问题的库，而不是自己花时间。