-2

我需要在像http://pinterest.com/这样的网格视图中显示带有标题的照片。我想要做什么：如在http://pinterest.com/中，一些图像显示为不同的宽度和高度。所以我想实现同样的事情，就我而言，图像来自数据库（mysql，php），所以所有图像的大小都相同。我需要一些 js 或 jquery 代码在网格视图中显示它们，但随机图像具有不同的大小。

4

2 回答 2

1

您遇到的问题是 pInterest 有 5 列，所有列的宽度都相同。这些图像都是不同尺寸的，因此这需要他们将所有图像的大小调整到相同的宽度，并允许它们拥有这些不同高度的图像。

如您所说，如果您的所有图像的高度和宽度都相同，那么如果没有不同的列宽，您将无法获得这种效果。但是，您的所有图像都将与该列中的所有其他图像具有相同的宽度和高度。

您可以使用几个 gridView 插件，例如-

这是我上面解释的不同宽度的一个例子。

pInterests 当前视图 在此处输入图像描述

宽度相等时你的会是什么样子。 在此处输入图像描述

不同宽度的你会是什么样子 在此处输入图像描述

于 2013-04-13T13:44:52.297 回答
0

首先将其用于类似 Pinterest 的网格： http: //masonry.desandro.com/

然后，如果您从数据库中获取带有图像 URL 的数组，请尝试以下代码：

//'Shuffle' the array for random order
<?php shuffle( $arrayImg ); ?>
// Iterates over the array
<?php foreach ( $arrayImg as $src ): ?>
  // Random images width between 200 and 300 with 'rand'
  // Maybe the random width is contradictory... but test it yourself =)
  <img src="images/<?php echo $src ?>" width="<?php rand(200,300) ?>">
<?php endforeach ?>
于 2013-04-13T13:43:14.633 回答