CSS过渡效果在浮动元素重新定位时的应用

Question

我正在处理类似于这样的内容：http://jsfiddle.net/Hh2Ht/ 正如您所看到的，我有一组浮动div，它们的宽度相同但高度不同。然而，容器具有百分比宽度，因此当容器改变大小时，浮动div会改变其位置。

我希望使用CSS过渡来使这种位置变化动画化。我可以使用绝对定位、一点点JavaScript计算定位并将过渡效果绑定到top和left属性来实现这一点，但是由于我想完全模拟浮动div的行为，因此最好不要使用绝对定位。

您认为是否可能？提前感谢您。

- dgnin

Answer 1

我不确定你描述的用纯CSS移动块是否可能。主要是因为其中一些块必须移动到DOM中的不同位置，这在CSS中是不可能的。

你尝试使用Isotope插件了吗？查看他们的网站，也许那就是你要找的东西。

- Kane Cohen

---

有趣。我也发现了这个网站http://masonry.desandro.com/。我不知道哪一个是最好的，但是这个最后一个是在MIT下授权的，而isotope需要25美元的商业使用费（我的情况）。只是要考虑一些事情。所有这些中的坏处是，如果所有div具有相同的宽度，在某些情况下，我对使用JavaScript和绝对定位的需求感到有点失望。在其他情况下，这是可以理解的。 - dgnin

FYI：Isotope使用Masonry，因此它们是相同的。但是Isotope还具有其他功能，例如排序、过滤等。 - N4ppeL

Isotope和Masonry是同一位出色的开发者David Desandro，又名Metafizzy所创建。他还有其他脚本，如Packery和Dragabilly，它们也依赖于Masonry。这些脚本的开发已经吸引了包括Paul Irish在内的高知名度的Web开发者，并且在Web开发社区中广为人知。 - pilau