jquery - 动画 float : visualizing position change

Question

我有一个可以垂直和水平显示的项目列表:

http://jsbin.com/olefi3/2

目前，这两种模式之间的切换会带来相当不和谐的用户体验，因为项目会突然重新定位(当应用/删除 CSS 类时)。让每个项目逐渐移动到新位置将有很大帮助，使用户更容易保持方向。

我知道 jQuery 的 animate 方法不适用于 float。虽然我可以想象一个解决方案，但它看起来相当复杂:

• 为每个项目创建一个不可见的克隆
• 应用所需的样式(垂直/水平)
• 记录克隆的新位置
• 删除克隆
• 将实际项目动画到记录的位置
• 将所需的样式应用到实际项目
• 从动画中删除内联样式

在我开始重新发明轮子之前，类似的东西已经存在了吗？

Answer 1

您可能会喜欢的插件是 isotope。 Isotope 将使用 CSS3 重新排序内容 block 并回退到 jquery-animate。查看:isotope