javascript - 水平布置许多 div，但要让较低的行在第一行下方紧密填充

Question

我正在尝试布置不同大小的 div 网格(它们包含图像和文本)。我希望它们从左向右流动，但较低的要紧靠在较高的元素下方。我很难描述这一点，因为我已经包含了我想要实现的目标的绘图，数字代表 div 的顺序。

我已经看到它在使用中，看起来所有的 div 都是使用绝对定位放置的。

有谁知道这种布局是如何实现的？我正在尝试构建一个可以在 web/tab/phone 上运行的站点，因此该解决方案应该能够在所有平台上运行。

Answer 1

这个答案是由 user:nevermind 提供的，但是人们不断添加评论，所以我要写下来。

一个名为 ma​​sonry 的 JS 插件可以让我获得想要的结果。 可以在这里找到:masonry.desandro.com

在包含 js 文件后，我遵循了 HTML 集成，如他们网站上所示:

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

<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

我非常擅长使用 Drupal Views 来生成我的代码，所以我通过创建一个模板覆盖文件 views-view--myviewname.tpl.php 来覆盖我的 View ，以包含一个 js- masonry 类引用。并更改 .item 以查找 views-row。

像魅力一样工作。