對齊塊彼此儘可能地

Question

比方說，我有這樣的情況：http://jsfiddle.net/BL3M7/：

HTML：

<div class="block" style="height: 50px">1</div> 
<div class="block">2</div> 
<div class="block">3</div> 
<div class="block">4</div> 
<div class="block">5</div> 
<div class="block">6</div> 

CSS：

.block { 
    height: 100px; 
    width: 30%; 
    border: 1px solid black; 
    display: inline-block; 
    vertical-align: top; 
    float: left; 
} 

我想阻止4〜儘可能地與第一塊一致。當然，我可以使用margin-top，比如http://jsfiddle.net/BL3M7/2/，但我不能這樣做，因爲塊大小的高度和寬度因頁面而異。那麼，沒有margin就可以達到這樣的效果嗎？

Answer 1

不幸的是，這隻能用css來完成。但是，有很棒的Javascript解決方案可以完全滿足您的需求！

看一看：http://masonry.desandro.com/

，或者如果你需要一些更多的選擇：http://isotope.metafizzy.co/

Answer 2

如果你樂於嘗試CSS3的解決方案，那麼你可以使用列數來實現類似的東西嗎？

此技術將從上到下運行，而不是從左到右，因此請注意HTML內容的順序。

我添加了一個容器代碼：

<div class="block-container"> 
    <div class="block" style="height: 50px">1</div> 
    <div class="block">2</div> 
    <div class="block">3</div> 
    <div class="block">4</div> 
    <div class="block">5</div> 
    <div class="block">6</div> 
</div> 

然後一些CSS

.block-container { 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    column-count: 3; 
    column-gap: 10px; 
    width: 100%; 
} 

.block { 
    display: inline-block; 
    margin-bottom: 20px; 
    width: 100%; 
    height: 100px; 
    border: 1px solid black; 
} 

DEMO

注：不幸的是這不會在IE9和下面的工作。如果你想支持這些，你可能需要一個JS後備。