Question

我正在寻找像Apples的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/。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您应该尝试Masonry jQuery plugin

Answer 3

您可以使用transform: translateX(x) TranslateY(y);

制作此平滑过渡效果

当容器调整大小时，使浮动div移动到位

3 个答案: