使列表项浮动到左边并堆叠起来，下面没有空格

Question

我正试图让一些李在左边的一个浮子里面堆叠起来并堆叠在一起。

ul的格式是

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

此菜单是服务器端生成的，无法修改。

我已经设置了一个演示来说明我得到了什么以及后续的内容：

我得到了什么： http://jsfiddle.net/VVyF7/1/

后面的内容，但不使用定位作为lis将动态呈现： http://jsfiddle.net/VVyF7/3/

Answer 1

动态案例中的布局无法使用CSS完成。

如果您无法更改HTML to have two columns，则必须使用JavaScript。

jQuery Masonry是最佳选择。还有Vanilla Masonry，这是一个不依赖于jQuery的原始JavaScript版本。