当容器调整大小时，使浮动div平稳地移动位置。

Question

我希望做一些类似苹果的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移动，我如何使它们浮到新位置的效果？

我将接受：-纯css - Javascript - Jquery和任意一个混合的答案。

我想尽量避免插件。

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>

​

Answer 2

你应该试试砌体jQuery插件

Answer 3

您可以使用transform: translateX(x) TranslateY(y);实现这种平稳的过渡效果。