定位不同长度的列表项

Question

我有一个包含数千件物品的ul列表。会发生什么是我有一个固定的宽度但变化的高度li取决于它们内部的内容，如评论，图像等。

现在我的列表水平流过用户的屏幕并转到新行。然而，问题是下一行的第一个li不会位于前一行的第一个li旁边，而是占用前一行的最长li并保持在它之下。

例如，http://oi47.tinypic.com/21kgqkw.jpg

可以这样做吗？

根据Chris的要求更新1： 请看你理解的我的照片。基本上，所有的lis需要从行到行垂直地保持彼此靠近

Answer 1

没有简单的方法来实现像纯html / css那样的垂直流，但是有一个jquery插件可以执行类似的操作。你应该看看Masonry

查看Basic Single Column Demo

Answer 2

根据您提供的有限信息，li标记可能不适合。相反，您可以使用article或div。如果您使用列表项，则注释列表更有意义ol，因为注释具有自然顺序（它们留下的日期/时间）。

这里的标签不是问题，只是一个注释。

对于手头的问题：根据您的示例图片Masonry可能是您的最佳路线：

  

Masonry是一个动态网格布局脚本。把它想象成另一面   CSS浮动。而浮动则水平排列元素   垂直，砌体垂直排列元素，每个元素定位   网格中下一个开放点的元素。结果最小化   不同高度的元素之间的垂直间隙，就像泥瓦匠一样   在墙上贴合石头。

此插件有vanilla或jQuery版本。