CSS3 Thay đổi bố cục animate cho các div động

Question

Khi bạn thay đổi kích thước cửa sổ, các div thả nổi sẽ được bọc vào dòng kế tiếp như mong đợi. Nhưng tôi thực sự muốn thay đổi bố cục này được làm động.

EDIT: Như một sang một bên, nó sẽ là tốt đẹp để tìm một giải pháp cho điều này mà không phụ thuộc vào JQuery. Tôi không ngại viết js của riêng mình nếu tôi cần. Lý tưởng nhất là tôi muốn thực hiện điều này thành một chỉ thị AngularJS khi tôi thấy nó hoạt động, do đó, tại sao tôi không muốn sự phụ thuộc của jQuery.

Đây là một phiên bản rút gọn của mã của tôi: http://jsfiddle.net/cDS7Q/3/

HTML

<div id="content"> 

    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 

</div> 

Và đây là CSS của tôi

body {background-color: #333;} 

#content div { 
    position: relative; 
    float: left; 
    background-color: #eee; 
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 100px; 
    height: 100px; 

    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 

#content { 
    margin-top: 50px; 
    padding-top: $gutter; 
    padding-bottom: 50px; 
    overflow: hidden; 
    width: 100%; 
} 

Hiệu quả Tôi đang cố gắng để đạt được là similair này trang web: http://saffron-consultants.com/journal/

Đổi kích thước cửa sổ thành xem các khối hoạt hình vào vị trí mới của chúng.

Answer 1

Bạn có thể thử thực hiện thao tác này. http://razorjack.net/quicksand/

Answer 2

Có thể với css, nhưng chỉ khi bạn thay đổi thông số bằng truy vấn phương tiện.

Ví dụ:

Nếu bạn thay đổi độ rộng của một phần tử, hoặc đệm và lợi nhuận với các truy vấn phương tiện truyền thông, hơn bạn sẽ nhận được một hình ảnh động. Ngoài ra, nếu bạn vị trí divs tuyệt đối hoặc tương đối và thay đổi vị trí trong các truy vấn phương tiện thì nó hoạt động.

Nhưng không phải với gói nổi/gói đơn giản. Cho rằng bạn sẽ cần JavaScript/jQuery.

ví dụ thêm này thay vì chỉ violong của bạn:

body { 
    background-color: #333; 
} 

#content div { 
    position: relative; 
    float: left; 
    background-color: #eee; 
    margin-left: 20px; 
    margin-bottom: 20px; 
    width: 200px; 
    height: 200px; 

    -webkit-transition: all .7s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .7s ease; 
    -o-transition: all .7s ease; 
    transition: all .7s ease; 
} 

#content { 
    margin-top: 50px; 
    padding-top: $gutter; 
    padding-bottom: 50px; 
    overflow: hidden; 
    width: 100%; 
} 

@media screen and (max-width: 480px) { 
#content div { 
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 100%; 
    height: 100px; 
    } 

}