如何为图像创建随机大小的图块照片库？

Question

我看过一些jQuery脚本，您可以用马赛克方式创建照片库。像这一个http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html或此http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html

我的照片尺寸不同，但大部分照片的宽度都比高度大。 我的目标是自动随机设置图像容器的尺寸（并加载原始图像），而不是手动裁剪它们，并将它们设置为不同大小的缩略图。

例如，在第一个入口img1.jpg中，它将显示为100x50，但在刷新时，相同的图像可能会显示为50x100。

我的问题是如何使用CSS和javascript创建此效果？

Answer 1

根据你问题中的链接，我看到三种类型的图像：垂直，水平和方形图像。因此，不是随机大小。

此外，它似乎很好地布局在网格布局中。垂直图像的宽度是水平图像宽度的一半，垂直图像的高度是水平图像高度的两倍（所以基本上只是翻转），方形图像等于水平图像的宽度或垂直图像。

通过建立网格和列大小，您可以动态定位包含图像的容器，并为其分配形状，缺少更好的术语和方向。使用一些jQuery，您可以使用.css函数轻松地相对于其他容器定位它们。

注意：示例中使用的缩略图等于其容器的大小。这对你来说也是一个好主意，看看它将如何确保你获得理想的效果。