我正在尝试实现与此类似的效果。也就是说，我有一些articles具有相同宽度但可以具有不同高度的块（此处为），并且我希望它们靠近它们的上邻居。内嵌显示文章并使用顶部垂直对齐时，文章仍按预期保持在其行上：
<html>
<head>
<style>
article { display: inline-block; vertical-align: top; width:200px; margin:5px; background-color:#D0D0D0; }
</style>
</head>
<body>
<div style="width:630px; background-color:#F0F0F0">
<article style="height:100px;"></article><article style="height:200px;"></article><article style="height:300px;"></article><article style="height:200px;"></article><article style="height:200px;"></article><article style="height:100px;"></article>
</div>
</body>
</html>
我想如果我将文章设置为预定义的列然后在此列中垂直对齐会更容易，但 AFAICT 在上面给出的示例中并非如此（可能具有能够动态更改列数的优势） .
这甚至可以在 CSS 中做到这一点吗？或者他们是否使用一些复杂的 JavaScript 来实现这一点？
（另外作为旁注，我需要articles彼此相邻而没有换行符，以防止中间出现虚假的空白，但这在上面的页面中似乎不是问题）。
编辑
我链接的页面的一个重要行为是我没有提到的，文章的显示顺序或多或少与它们列出的顺序相同，因此例如保留了时间顺序。
这里有几个选项，这完全取决于您希望块所在的顺序以及元素之间的空间。
您可以在下面的脚本中看到所有正在运行的技术。
首先让我们看看所有可能对这里有用的 CSS 技术。
display: inline-block让你控制垂直对齐。而你的顺序是从左到右。但是空间没有正确使用。
display: table 的行为与 inline-block 大致相同；（取决于设置）但这在这里没有多大帮助。
浮动：更好地利用空间。但它的行为有点奇怪。（尝试在此处切换 DOM 中的元素。）
colums：很好地利用了空间。但顺序是基于列，而不是文本方向。您可能会在这里遇到几个特定于 webkit 的错误。
flexbox：可以为你做很多事情。控制这里的顺序很棘手。由于包装基于列。否则它的行为类似于 inline-block；
我不想承认，但 javascript 可能是这里的正确选择。您可以使用一种叫做同位素或砖石的东西。这样顺序是基于文本方向的，并且空间使用得当。
...
您可以使用其他 CSS 技术，并且可能会获得更好的结果。但是现在这些浏览器支持有限：
$(function(){
$('.masonry').masonry({
// options
itemSelector : '.masonry article'});
});hr {
clear: left;
}
article {
width: 32%;
margin-top: 15px;
color: #fff;
font-size: 20px;
}
.inline-block article {
display: inline-block;
vertical-align: top;
}
.float article {
float: left;
width: 32%;
margin-left: 3px;
}
.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.columns article{
width: 100%;
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 500px;
}
.flexbox article {
margin-left: 3px;
}
.masonry article {
margin-left: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>
Inline-block:
<div class="inline-block">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Floats:
<div class="float">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Columns:
<div class="columns">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Flexbox:
<div class="flexbox">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Masonry (JS):
<div class="masonry">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>