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

我需要在网格视图中显示带有标题的照片，如。 我想做的是： 如中所示，一些图像显示为不同的宽度和高度。所以我想实现同样的事情，

---

在我的例子中，图像来自数据库（mysql、php），所以所有图像的大小都相同。我需要一些js或jquery代码在网格视图中显示它们，但随机图像的大小不同。

首先将其用于类似Pinterest的网格：

然后，如果要使用图像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 ?>

//“洗牌”数组以获得随机顺序
//迭代数组
//随机图像宽度介于200和300之间，带有“rand”
//也许随机宽度是矛盾的。。。但是自己测试一下=）
“宽度=”“>

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

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

有几个gridView插件可以像这样使用-

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

pInterests当前视图

宽度相同时，您的手机会是什么样子。

不同宽度的衣服会是什么样子

---

如果所有图像大小相同，只需使用CSS即可。可能的重复