在同位素中设置项目大小的动画:为什么第一个项目不稳定

Animating item size in Isotope: Why is first item wonky?

本文关键字：项目 动画 为什么 不稳定 第一个 同位素 设置      更新时间：2023-09-26

我正在学习使用同位素，并看到了作者关于如何设置项目大小动画的博客文章。

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

所有项目都可以正确调整大小，并使同位素刷新布局——除了第一个项目。

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

单击列表中的任何其他项目都会产生正确的行为。只有第一个是不稳定的。有人能看到是什么原因造成的吗？

这是我的测试用例：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' )
    });

经过更多的实验，我找到了答案。同位素有一个名为columnWidth的属性，文档将其视为可选属性，因为脚本可以从第一项中确定列宽。

然而，将columnWidth添加到我的.isotrope（）初始值设定项中使这件事正常工作。

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

此外，columnWidth似乎是，而不是与项的宽度相同。它是项目的宽度，加上檐沟（边距）。在我的例子中，columnWidth是206:196（项目宽度）+10（空白/边距）。

相关文章：