css基于动态列表制作列表

Question

我想在css中创建一个列表，但我不知道该怎么做。 我有一个浮动的div，它们的宽度总是恒定的（240px）！但它们的高度可以是动态的。

必须计算的更多参数是行数也是动态的，在这张图片中是3行，但它可以是4行，5行甚至10行（基于screen.width）所以我无法使用此代码：

<div class="row1">
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
</div>

<div class="row2">
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
</div>

<div class="row3">
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
</div>

这是我想在css中制作的图片： http://i.stack.imgur.com/usPlB.png：

提前致谢， 丹尼尔。

Answer 1

你实际上无法在纯CSS中执行此操作，因为您需要JavaScript才能动态计算水平放置的位置。

但是，您可以使用Masonry作为独立程序或jQuery插件。