0

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

4

1 回答 1

1

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

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

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

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

于 2012-07-03T00:24:45.663 回答