尽可能高效地填充div网格（屏幕空间，而不是CPU）

Question

我正在制作一个页面，以显示我的客户的推荐书。一些推荐书很短，而其他推荐书很长。它看起来有点像“块状”......下面是它实际上看起来像的图片：

（请暂时忽略暂时重复的推荐）

经过一番思考之后，我意识到如果所有类型的空间更有效地填满空白区域会更好看，这就是我在图像编辑程序中所做的：

有人知道怎么做这样的事吗？我已经用Google搜索了一下，但我无法找到这样的最佳搜索词......

谢谢！

修改

以下是以下答案之后的结果。谢谢你们！

Answer 1

如果您不介意使用jQuery，则此任务的名为jQuery Masonry的插件完美。您可能需要学习一些jQuery才能使其工作，但如果您遵循somewhat-extensive tutorial，则不应该花太长时间。

您无法使用CSS执行此操作，因为执行此操作的唯一方法是使用float，但这些只能横向工作。这个插件通过jQuery模拟float: top样式，这是你想要做的。

Answer 2

如果你可以使用jQuery，我会查看这个插件：

http://masonry.desandro.com/

Answer 3

查看jQuery Masonry插件。

Answer 4

查看masonry jquery。

Answer 5

这正是CSS3 multi-column layout的目的。

不幸的是，目前还没有很多浏览器支持它，因此您可能必须应用一些聪明才能使其在其他浏览器中“不丑”。例如，您可以让默认值接管并让每个推荐书占据整个宽度 - 这不是很难读，并且肯定比原始布局更好。