Niejednolita kratka sieciowa

Question

Hej próbuję zrobić pływającą siatkę, która ma różne kształty.

Tu jest mój cel i co dzieje:http://imgur.com/a/wXQfA

Jak widać istnieje luka pod poziomym kawałku. Próbuję to naprawić bez konieczności użycia żadnego pozycjonowania, aby móc później dodawać pola lub przenosić je.

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

Oto mój kod:http://jsfiddle.net/jw7pV/ Z jakiegoś powodu wersja jsFiddle nie wygląda mojej wersji chromowanej .

Answer 1

Edycja: przepraszam, nie czytałem po raz pierwszy, że potrzebujesz dynamicznych pudełek.

Jeśli rozmiar twoich kolumn się skaluje (jak jakiś rodzaj responsywnego projektu), potrzebujesz czegoś, co ustawi te bezwzględne pozycje dynamicznie. Więc potrzebujesz javascript.

Do tego można użyć jokera muru lub izotop jQuery.

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)