液体布局，JS解决方案答案

【问题标题】：Liquid Layout, JS solution液体布局，JS解决方案
【发布时间】：2012-11-30 00:46:02
【问题描述】：

我有一个使用 CSS 浮动的居中液体布局。主要内容是相等的高度/宽度框，当浏览器窗口调整大小时，css 浮动重新定位。有没有一种简单的方法利用 JS/JQuery 或类似方法来为浮动重新定位时的移动设置动画？

我已经探索了 JQuery Masonry、Isotope 和其他一些，但我想知道是否有一种简单的轻量级方法可以做到这一点，而无需计算每次宽度变化时所有盒装的位置。

希望有任何想法、要搜索的关键字等：)

【问题讨论】：

你检查JQuery.animate()了吗？
是的，缓动似乎只是我需要的模块，但是如何在不查看所有元素并将它们设置为绝对值的情况下实现它？
老实说，如果我能让同位素可靠地在页面上居中，我会喜欢它的一些功能。不幸的是，它与我当前的居中浮动 hack 冲突，并且网站上的居中砖石实现似乎经常为生产留下添加填充的列:(
其实这是一个非常有趣的问题。在 javascript 之前使用浮点数来确保流畅的布局是一种很好的做法。回退到完整的 JavaScript 解决方案将是一个遗憾。我去看看。
:) 我确实让 Masonry 居中并正常工作，但我仍然更愿意只依赖 javascript 来制作动画、渐进增强、优雅降级和所有爵士乐。

【解决方案1】：

查看 CSS 过渡和动画。你不需要 javascript。

【讨论】：

对不起，我不同意。行为层应该由 javascript 设置，而不是由 CSS 设置。因此，用户可以通过禁用浏览器中的 javascript 来禁用它。顺便说一句...过渡和动画可以使用 css 属性来应用。但无论如何必须通过javascript应用。
我喜欢你的方式，不幸的是，在你指定的链接上，还不支持浮动。 http://oli.jp/2010/css-animatable-properties/
我保证，如果 Samantha 发布一些代码作为她的情况示例，我可能只使用 css 就可以让它工作。
设置只是
- 元素。所有
- 元素都是 float:left。我试图做到这一点，以便当浏览器窗口重新调整大小/缩放时，浮动的重新定位以适应新大小是动画的/不会立即消失并重新出现。然而，优雅的降级对我来说也很重要。
Welp，我会承认我错了。这一天一直在工作，并得出结论，您确实需要至少一些基本的 js 才能有效地做到这一点。