Bố cục đáp ứng chiều cao không đồng đều

Question

Tôi đã cố gắng che giấu đầu của mình để giải quyết một thiết kế trang web nhất định trong vài ngày qua, nhưng cho đến nay tôi đã không thể tìm ra bất kỳ giải pháp thanh lịch nào.

Tóm tắt thiết kế có 3 cột chứa nơi chứa các chiều cao không đồng đều (được tạo động) nhưng có cùng chiều rộng (chất lỏng). Họ cần phải được đặt ra để chúng theo thứ tự số đi từ trái qua phải; tức là 1-2-3 ở hàng trên cùng, tiếp theo là 4-5-6 ở hàng thứ hai và cứ tiếp tục như vậy.

Bây giờ, những gì thực sự khiến hạt của tôi đang cố gắng làm cho dòng này gọn gàng mà không cần nhiều khoảng trống dọc "không cần thiết" ở giữa các vùng chứa. Tôi đã tạo mã bản mock-up sau (cũng có sẵn như là một JSFiddle dưới mã khối) để minh họa:

HTML

<div class="wrapper" id="wrapper"> 
    <div class="container small" id="container_1">1</div> 
    <div class="container large" id="container_2">2</div> 
    <div class="container small" id="container_3">3</div> 
    <div class="container medium" id="container_4">4</div> 
    <div class="container small" id="container_5">5</div> 
    <div class="container medium" id="container_6">6</div> 
    <div class="container large" id="container_7">7</div> 
    <div class="container medium" id="container_8">8</div> 
    <div class="container large" id="container_9">9</div> 
    <div class="clearfix"></div> 
</div> 

CSS

.wrapper { 
    width: 100%; 
    padding: 5%; 
} 
.clearfix { 
    clear: both; 
} 
.container { 
    display: block; 
    float: left; 
    width: 25%; 
    margin: 2.5%; 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.small { 
    height: 100px; 
    background: red; 
} 
.medium { 
    height: 150px; 
    background: green; 
} 
.large { 
    height: 200px; 
    background: blue; 
} 

JSFiddle : http://jsfiddle.net/tzikas/MYgNx/

Lưu ý: Vì chính bố cục cột cuối cùng sẽ bre ak xuống đến hai/một cột (s) dựa trên chiều rộng thiết bị, tôi bao gồm một nút "Toggle layout" đơn giản trong JSFiddle để mô phỏng điều này.

Những gì tôi muốn giúp đỡ tìm ra là như sau:

1. Làm thế nào để thoát khỏi khoảng cách thẳng đứng quá mức giữa, mỗi dụ, "1" và "5" hoặc "2" và " 6 "?
2. Làm thế nào để có được "4" ở vị trí bên dưới "1" thay vì bên dưới "3" (đồng thời giải quyết điểm trước đó)?

Tốt Tôi muốn giải quyết này mà không cần thao tác DOM thông qua bất kỳ loại kịch bản, nhưng nếu tôi phải rồi Mootools là của tôi "độc ưa thích.

Answer 1

Theo yêu cầu của bạn. Bạn có thể sử dụng http://masonry.desandro.com/ cho điều này