Tek tip olmayan ızgara yüzdürme

Question

Farklı şekillere sahip yüzer bir ızgara yapmaya çalışıyorum.http://imgur.com/a/wXQfA

yatay parçanın altında bir boşluk olduğunu görebileceğiniz gibi:

İşte hedefimi ve oluyor whats olduğunu. Ben herhangi bir konumlandırma kullanmak zorunda kalmadan düzeltmeye çalışıyorum, böylece daha sonra kutu ekleyebilir veya etrafta taşıyabilirim.

Kodu: 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: jsFiddle versiyonu benim krom versiyonu gibi görünmüyor nedensehttp://jsfiddle.net/jw7pV/ : Burada

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

benim kodudur .

Answer 1

Düzeltme: Üzgünüz, dinamik kutuları ilk kez okudunuz.

Sütunlarınızın boyutları ölçeklendiyse (bir çeşit duyarlı tasarım gibi), bu mutlak konumları dinamik olarak ayarlayacak bir şeye ihtiyacınız vardır. Yani javascript'e ihtiyacın var.

Bunun için jquery masonry veya jquery isotope kullanabilirsiniz.

http://isotope.metafizzy.co/

:)