isotope.js - 如何解决流体布局中渲染错误的空间

Question

至于主题，我在同位素和流体布局方面遇到了问题。我认为这本身并不是真正的同位素问题。当对象像同位素一样 treated/positioned 时，浏览器可能会出现一些渲染问题。

请看附件。有时候这种情况会发生。不总是。通常，通过稍微调整 window 的大小（或者有时只是重新加载），所有的空间就会消失，布局就会正确。

我认为这是一个很普遍的问题。如果我看一下 firebug 中的拇指尺寸，嗯，它们都恰到好处。所以我猜这与浏览器渲染能力有关。

有什么想法吗？

Answer 1

经过更多搜索后，我认为同位素定位对象的方式会在使用百分比值调整元素大小时欺骗浏览器渲染引擎。使用 percentPosition 不仅不能解决问题，反而会导致过滤动画更加缓慢。

同位素的修改现在对我来说需要太多的工作，但我刚刚发现另一个脚本似乎是专门为响应性而编码的（因此，证明了问题的普遍性）。我还没有尝试过，但我看了看代码，我认为它做得非常好：

https://mixitup.kunkalabs.com/

所以，现在这就是答案。希望对你有帮助。

简短说明：目前，mixitup 不支持开箱即用的 mansory 布局。不过这对我来说不是问题，因为我的布局是规则的正方形网格。