如何为图像创建具有随机尺寸的图块照相馆？

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函数相对于其他容器定位它们。

注意：您的示例中使用的缩略图等于其容器的大小。 这对您也是一个好主意，因为它将确保您获得所需的效果。