非均勻網格浮動

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：

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; 
} 

這裏是我的代碼：http://jsfiddle.net/jw7pV/ 由於某種原因的jsfiddle版本並不像我的Chrome版本。

Answer 1

編輯：抱歉沒有讀過第一次你需要動態框。

如果您的列大小縮放（如某種響應式設計），那麼您需要一些可以動態設置這些絕對位置的東西。所以你需要javascript。

爲此，您可以使用jquery masonry或jquery同位素。

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)