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

对，这有点难以解释，但我想说的是：

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

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

请参见我在此处制作的插图：

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

---

感谢您提供的所有帮助。

如果您愿意使用Javascript解决方案，我发现该插件非常适用于“最佳匹配”不同形状的矩形

您可以使用如下标记对其进行设置：

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

---

还有一个问题是，如果您根本没有使用jQuery，您会说这些帖子的高度将不同，但您的图形的高度相同。我认为你应该用一个真实的数据绘制一个新的图形，这样你会看到你现在看不到的东西。如果我理解正确，你想要一个最佳拟合算法是吗？在图中，您显示了一个包含7个帖子的配置，分为3组。总是这样吗？一个团队中可以有4个人吗？如果足够大的话，可能会有1个人吗？@Vivek Chandra-你的评论很愚蠢。这是一个严肃的问题，西蒙精彩的回答就是证明。那就去问另外一个问题吧。干杯，朋友，我现在来看看这个（：很好！谢谢！：D

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