javascript - Make floating divs move place smoothly when container resizes -

i'm looking apples' icloud website, when screen gets small divs move new position in effect.

i'm looking @ this:

.wrap {    width: 100%;    background-color: green;    clear: all;  }  .wrap div {    float: left;    background-color: red;    height: 100px;    width: 100px;    margin: 10px;  }

<div class="wrap">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>

as can see when screen gets smaller divs move, how make them float new position in effect?

i accept: - pure css - javascript - jquery , mix of answer.

i avoid plugins possible.

have @ http://isotope.metafizzy.co/.

var iso = new isotope( '.wrap', {    // options  });

.wrap {    background-color: green;  }  .wrap div {    float: left;    background-color: red;    height: 100px;    width: 100px;    margin: 10px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>  <div class="wrap">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>