IsotopeJS 可以在不向 Isotope 项目添加 position: absolute 的情况下工作吗？答案

【问题标题】：Can IsotopeJS work without adding position: absolute to the Isotope items?IsotopeJS 可以在不向 Isotope 项目添加 position: absolute 的情况下工作吗？
【发布时间】：2013-03-18 17:54:42
【问题描述】：

Isotope 将此样式添加到项目中：

position: absolute; 
left: 0px; 
top: 0px; 
-webkit-transform: translate3d(0px, 0px, 0px);

是否可以禁用此功能，但仍保持同位素功能？我读过关于transformsEnabled 的内容，它说禁用它会导致浏览器依赖于顶部/左侧定位。我可以反过来，让浏览器依赖 CSS 转换，还是 Isotope 总是依赖 position: absolute？

【问题讨论】：

你找到答案了吗？
不。我认为这是不可能的。
感谢您的回复。我同意这似乎是不可能的。对我来说，将 transformsEnabled 设置为 false 可以让我解决我的问题。但是，似乎就是这样。

标签： jquery-isotope

【解决方案1】：

事实证明，Isotope 可以在不向 Isotope 项目添加 position: absolute 的情况下工作。这是通过使用hiddenStyle 和visibleStyle 定义样式来实现的。一旦实施，这似乎确实需要一些额外的工作，如http://codepen.io/betweenbrain/pen/bkwuF 所示。希望这有助于您走上正确的道路。

【讨论】：

【解决方案2】：

这是因为未加载的图像导致项目相互重叠。
在调用isotop 之前添加imagesLoaded 函数，在所有图像加载后尝试初始化同位素。代码应如下所示：

var $container = $('#container').imagesLoaded( function() {
   $container.isotope({
    // options
  });
});

【讨论】：

别忘了下载 imagesLoaded 脚本并将其添加到 isotope.js 文件中；)

【解决方案3】：

给定容器宽度 100% 和相对位置。

【讨论】：