javascript - CSS 和 HTML 框在顶部最小但不按顺序排列

Question

是的，这有点难以解释，但我所追求的是如下：

我有一个将进入 HTML 页面的帖子数据库。显然，所有这些帖子的大小都会不同，因此包含它们的盒子也会有不同的大小。

我所追求的是一种使这些盒子看起来都很好地相互配合的方法，如下图所示。如果第一个帖子是一个小帖子，那么它将开始一行小框。而且它们也不一定都具有相同的高度。在图片中，每个帖子都被编号以显示它在帖子数组中的位置。

请参阅我在这里制作的插图：

在此处输入图像描述

这可能吗？我假设我可能需要一些 Javascript，而 JQuery 更可取。

感谢您的任何帮助。

score 3 · Accepted Answer

由于您愿意使用 Javascript 解决方案，我发现jQuery Masonry插件非常适合“最适合”不同形状的矩形。

您使用以下标记进行设置：

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

然后，float: left您将.items，并将 Masonry 处理程序附加到#container：

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    ...
  });
});

如果您还没有使用 jQuery，还有一个非 jQuery 版本

1 回答 1