同位素容器调整大小令人震惊

Question

我正在使用 javascript 库 Isotope 创建一个可过滤的投资组合。我通过自动左右边距和通过砖石布局option、isFitWidth 将 Isotope 容器居中在 css 中，它“设置容器的宽度以适应可用的列数”（来自 Isotope 文档） .

CSS

#isotope-list {
margin: 0 auto;
}

Javascript

$container.isotope({
    itemSelector : '.item', 
    layoutMode : 'masonry',
    masonry: {
        isFitWidth: true,
        columnWidth: 60,
        gutter: 10
    },
    transitionDuration: '3s'
});

不幸的是，当同位素项目被过滤时，容器会在执行转换之前立即调整大小。这会导致不和谐的跳跃，您可以在此jsfiddle 中看到。我已将过渡持续时间延长，以便您更容易看到问题。

我尝试添加到容器宽度的过渡，transition: width 3s ease;，但这似乎非常滞后、紧张和不和谐，即使是缓动也是如此。 Here 是一个应用了该转换的 jsfiddle。

在保持容器居中的同时，我可以做些什么来使容器调整大小不抖动且不滞后？

Answer 1

您应该使用 .element-sizing 并删除 columnWidth 和 Gutter 并在您的 CSS 中应用边距。还将float:left; 应用于您的项目。

给你一个工作的jsfiddle。

居中砌体：

使用bootstrap + isotope element-sizing = http://jsfiddle.net/eff841wh/143/