Isotope中的项目大小动画:为什么第一个项目不稳定？

Question

我正在学习使用Isotope,并且看到了作者关于如何设置项目大小动画的博客文章.

我已经为我正在开发的项目实现了这一点.它由三个垂直列组成.每个项目是196px x 70px.单击某个项目时,它将扩展为402px x 230px.

所有项目都正确调整大小并导致Isotope刷新布局 - 第一项除外.

单击第一个项会导致所有后续列表项仅在一个垂直列中排列 - 即使有足够的空间且项目应该围绕第一个项目流动.

单击列表中的任何其他项会导致正确的行为.只有第一个是不稳定的.谁能看到可能导致这种情况的原因？

这是我的测试用例:http://joshrenaud.com/pd/testcase/testcase.html

处理此大小调整的代码如下所示:

    $('.child').click(function(){
        var $this = $(this);
        if ($this.hasClass('big')) {
            tileStyle = { width: 196, height: 70};
        }
        else {
            tileStyle = { width: 402, height: 230};
        }
        $this.children().children('.childDate').toggle();
        $this.children().children('.childDesc').toggle();
        $this.toggleClass('big');

        $this.find('.child-content').stop().animate( tileStyle );

        $('#container').isotope( 'reLayout' )

    });

Answer 1

经过一些实验,我找到了答案.Isotope有一个名为columnWidth的属性,文档认为该属性是可选的,因为脚本可以确定第一个项目的列宽.

然而,将columnWidth添加到我的.isotope()初始化程序中使得这个工作正常.

$('#container').isotope({
    masonry: { columnWidth : 206 }
});

此外,似乎columnWidth中是不一样的项目的宽度.这是项目的宽度,加上排水沟(边距).在我的例子中,columnWidth是206:196(项目宽度)+10(天沟/边距).