javascript - css float元素在网格中左右不等的高度

Question

请问如何实现图1的效果

到目前为止我得到的是

.box { 显示:内联 block ；垂直对齐:顶部；宽度:100px；}

结果如图 2 所示。 (注意:我知道我可以用 float: left 完成同样的事情)

我的 HTML 代码看起来像这样:

<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>

我希望每个元素尽可能向左浮动，同时向上 float 。

是否可以使用纯 css 来实现，或者我需要一些 javascript 吗？

编辑:

对我来说，将整个网格定位到页面中心很重要。这就是我使用 display:inline-block 的原因。网格也不应该固定在页面上，因为我希望它在我调整窗口大小时重排。

Answer 1

您可以使用流行的库 Masonry .

A dynamic layout plugin for jQuery The flip-side of CSS floats

这是一个代码 example ...

$('#container').masonry({
  itemSelector: '.box'
});

这是 Github 上的来源以及对 David Desandro 的采访在 Shoptalk 播客上。

对于不使用 jQuery 的人，请注意还有 Vanilla Masonry这是无框架版本。

提示:确保父容器具有 position:relative 以便所有内容都绑定(bind)到您的容器。