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

Question

关于这个问题，我遇到了同位素和流体布局问题。我不认为这本身就是同位素问题。可能一些渲染问题浏览器在对象被处理/定位时就像同位素一样。

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

我认为这是一个非常普遍的问题。如果我看看萤火虫的拇指尺寸，那么它们都是正确的。所以我猜它与浏览器渲染功能有关。

有什么想法吗？

Answer 1

在搜索了一下之后，我认为同位素会以某种方式定位对象，当元素按百分比值大小时，它会欺骗浏览器渲染引擎。使用percentPosition不仅无法解决问题，而且会导致过滤动画更加缓慢。

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

https://mixitup.kunkalabs.com/

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

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