javascript - 同位素容器大小调整令人不快

Question

我正在使用 javascript 库创建一个可过滤的投资组合 Isotope .我通过自动左右边距和砖石布局将 Isotope 容器置于 css 的中心 option , isFitWidth，它“设置容器的宽度以适合可用的列数”(来自 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/