如何为图像创建具有随机大小的磁贴照片库

How to create a tile photo gallery with random sizes for the images?

本文关键字：照片库随机图像创建更新时间：2023-09-26

我见过一些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创建这种效果？

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

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

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

注意：示例中使用的缩略图与其容器的大小相同。这对您来说也是一个好主意，看看它将如何确保您获得所需的效果。