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

Question

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

然后，我有三种不同的图像尺寸 s，m＆amp;升

用于高图像和m＆amp; l用于宽图像。

这些图像显示在一个表中，其中小图像占据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 =白空间）：

而不是像这样显示它

ssw
l
l

我希望它看起来像这样：

sm (or ms)
sm (or ms)

我如何使这项工作？

Answer 1

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

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