javascript - 随着内容大小的变化，以动画方式重新定位左浮动 DIV

Question

我有许多左浮动、固定宽度的 DIV。当窗口大小增加并且一行中容纳更多 DIV 时，DIV 会立即重新定位。

我想知道是否有一种方法可以为重新定位设置动画，以便用户更容易地跟随某个框来查看它移动到的位置 - 最好仅使用 CSS。

.box {
  float:left;
  width: 200px;
  min-height:200px;
  background:red;
  margin:20px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

目前仅使用 WebKit 的解决方案就可以了(它是嵌入了 WebView 的 native 应用程序)。我尝试了 -webkit-transition:all 2s 但没有效果...

编辑:

CSS3 灵活的框布局是否允许 DIV 位置的动画过渡？

Answer 1

类似 masonry ( http://masonry.desandro.com/ ) 的东西可能是你的一个不错的选择，我知道它不是纯 CSS，但它可以跨浏览器工作，并且不会对页面速度产生太大影响。

您可以通过上面的链接了解更多信息，但最简单的是，您只需要以下 JS:

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

(显然，您需要在页面上的某个位置包含脚本以及一些基本的 CSS 样式)

据我所知，CSS 过渡仅在您的元素定位而不是 float 时才会起作用，这可能是您的一个可能的解决方案，但如果您希望它们这样做，我可以看到这很快就会变得非常困惑重新布局较小的窗口尺寸。不过，如果有一种方法可以用纯 CSS 做到这一点，我会感到惊喜!