最明智的方式來編碼這些瓷磚系統

Question

目前我正在一個網站，其中包括多個這些瓷磚系統，你可以看到下面。

我想知道哪條路是最好的給他們的代碼。

我用砌體工作得很好，但它是一個基於jQuery的解決方案。 http://jsfiddle.net/xfxYQ/

HTML

<div class="box-container"> 
    <article class="box span-1x1">1</article> 
    <article class="box span-1x1">2</article> 
    <article class="box span-2x2">3</article> 
    <article class="box span-1x1">4</article> 
    <article class="box span-1x1">5</article> 
    <article class="box span-2x2">6</article> 
    <article class="box span-1x1">7</article> 
    <article class="box span-1x2">8</article> 
    <article class="box span-1x1">9</article> 
</div> 

CSS

.box-container { 
    width: 240px; 
    margin-bottom: 50px; 
    background: blue; 
} 

.box { 
    float: left; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    background: red; 
} 

.span-1x1 { 
    width: 50px; 
    height: 50px; 
} 

.span-1x2 { 
    width: 50px; 
    height: 110px; 
} 

.span-2x1 { 
    width: 110px; 
    height: 50px; 
} 

.span-2x2 { 
    width: 110px; 
    height: 110px; 
} 

砌體jQuery的

var $container = $('.box-container'); 

$container.masonry({ 
    itemSelector: '.box' 
}); 

是否有人有一個普通的HTML/CSS的解決方案一個聰明的主意？

Answer 1

有很多CSS網格框架旨在創建這樣的事情。

960.gs 也是一個基於CSS的網格框架。沒有Javascript int it，所以你可以看看它的架構 ，甚至使用它。

如果你想要一些動畫或其他東西，你可以使用CSS3動畫，如果你真的不想 想使用任何Javascript（我也不喜歡）。

祝你好運。

Answer 2

你一定要將HTML分成多列。基本上這需要相當多的HTML重寫。例如在此jsFiddle：

<div class="box-container cf"> 
    <div class="column"> 
    <div class="box span-1x2">0</div> 
    </div> 
    <div class="column"> 
    <div class="box span-1x1">1</div> 
    <div class="box span-1x1">2</div> 
    </div> 
    <div class="column"> 
    <div class="box span-2x2">3</div> 
    </div> 
</div>