Lưới phao không đồng nhất

Question

Hey im đang cố gắng tạo lưới nổi có các hình dạng khác nhau.

Đây là mục tiêu và whats xảy ra của tôi:http://imgur.com/a/wXQfA

Như bạn có thể thấy có một khoảng cách dưới mảnh ngang. Tôi đang cố khắc phục nó mà không phải sử dụng bất kỳ vị trí nào để tôi có thể thêm hộp vào sau hoặc di chuyển chúng xung quanh.

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

Đây là mã của tôi:http://jsfiddle.net/jw7pV/ Đối với một số lý do phiên bản jsFiddle không giống như phiên bản chrome của tôi .

Answer 1

Chỉnh sửa: xin lỗi đã không đọc lần đầu tiên bạn cần hộp động.

Nếu kích thước các cột của bạn có tỷ lệ (như một loại thiết kế đáp ứng) thì bạn cần một cái gì đó sẽ đặt các vị trí tuyệt đối này một cách linh hoạt. Vì vậy, bạn cần javascript.

Đối với điều đó bạn có thể sử dụng khối xây đá hoặc đồng vị jquery.

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)