javascript - 当容器调整大小时使 float div 平滑地移动位置

Question

我正在寻找类似 Apple 的 iCloud 网站的东西，当屏幕变得太小时，div 会慢慢移动到新的位置。

我在看这样的东西:

.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>

如您所见，当屏幕变小时 div 会移动，我如何让它们 float 到效果中的新位置？

我会接受:- 纯CSS- Javascript- 查询以及任意组合作为答案。

我想尽可能避免使用插件。

Answer 1

看看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>