グリッド不均一格子

Question

異種の浮動グリッドを作成しようとしていますね。ここで

私の目標といただきましたが起こっている：あなたは、水平部分の下に隙間がある見ることができるようにhttp://imgur.com/a/wXQfA

。私は後でボックスを追加するか、またはそれらを移動することができるように、任意の位置を使用することなくそれを修正しようとしています。

コード： Htmlの

 <li class="mediumBox"> 
      <a href="#"><img src="..." height="205" width="430"></a> 
     </li> 

     <li class="largeBox"> 
      <a href="#"><img src="..." height="430" width="430"></a> 
     </li> 

     <li class="verticleMediumBox"> 
      <a href="#"><img src="..." height="430" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 
    </ul> 
</div> 
</body> 

のCss：http://jsfiddle.net/jw7pV/ jsFiddleバージョンは私のクロームバージョンのように見えないいくつかの理由について：

body{ 
background-color: #fffdf9; 
height: 100%; 
width: 100%; 
} 

#content{ 
background-color: red; 
height: auto; 
width: 900px; 
margin: 5em auto 0 auto; 
} 

#work ul{ 
list-style: none; 

} 

#work li{ 
float: left; 
margin: 10px; 
} 

#work li >a{ 
display: block; 
} 

#work li .smallBox{ 
float: left; 
display: block; 
} 

#work li .mediumBox{ 
float: left; 
display: block; 
} 

#work li .verticleMediumBox{ 
float: left; 
display: block; 
} 

#work li .largeBox{ 
float: left; 
display: block; 
} 

ここでは私のコードです。

Answer 1

編集：申し訳ありませんが、初めてダイナミックボックスが必要です。

カラムのサイズが（ある種のレスポンシブデザインのように）大きければ、絶対位置を動的に設定する必要があります。だからあなたはJavaScriptが必要です。

jquery masonryまたはjquery isotopeを使用できます。

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)