Question

我正在使用javascript libary Isotope创建可过滤的投资组合。我通过自动左右边距在css中居中，并通过砌体布局option，isFitWidth，其中＆＃34;设置容器的宽度以适应可用的列数＆＃34; （来自Isotope docs）。

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/

同位素容器调整大小是Jarring

1 个答案: