7

我正在学习使用Isotope并偶然发现了作者关于如何为项目大小设置动画的博客文章。

我已经为我正在开发的项目实现了这一点。它由三个垂直列组成。每个项目为 196 像素 x 70 像素。当您单击一个项目时，它将扩展为 402 像素 x 230 像素。

所有项目都正确调整大小并导致 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' )

    });
4

1 回答 1

11

经过更多的实验，我找到了答案。Isotope 有一个名为 columnWidth 的属性，文档表明它是可选的，因为脚本可以从第一项确定列宽。

但是，将 columnWidth 添加到我的 .isotope() 初始化程序使这件事正常工作。

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

此外，columnWidth 似乎与项目的宽度不同。它是项目的宽度，加上装订线（边距）。就我而言，columnWidth 为 206：196（项目宽度）+ 10（装订线/边距）。

于 2011-05-27T20:38:51.893 回答