如何使用jquery在网格视图中显示带有字幕的照片，例如http://pinterest.com/

Question

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

Answer 1

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

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

您可以使用几个gridView插件 -

• Masonary
• Isotope

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

pInterests当前视图

所有宽度都相同的情况。

不同宽度的你会是什么样子

Answer 2

首先将它用于类似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 ?>