Javascript Jquery脚本后CSS未更新-同位素不对称可过滤网格

我正在尝试创建一个不对称网格，可使用同位素过滤网格，其中不对称意味着每列具有不同的边距顶部值：

.active:nth-child(3n+1) .tile_inner  {margin-top: 280px;}
.active:nth-child(3n+2) .tile_inner  {margin-top: 140px;}
.active:nth-child(3n+3) .tile_inner  {margin-top: 0;}

这样，列会稍微移位，正如您在我制作的JSFIDLE中所看到的：

该样式不会应用于瓷砖本身（这会影响计算），而是应用于瓷砖内部的子元素

现在，加载页面时，结果看起来正常，但一旦激活一个或多个筛选器（通过单击顶部的标签），第n个子规则似乎应用不正确，即使它只会影响已过滤的元素（具有.active类的元素）

---

为什么会这样？我遗漏了什么吗？

您不能在此处使用

nth-*

选择器，因为它会计算所有同级（而不仅仅是

.active

同级）。您可以使用一点javascript手动设置边距：

$container.find(filter).each(function(i) {       
        var off = (280-(i % 3)*140) + "px";

        $(":first-child",this).css({"margin-top":off});
    });

小提琴在这里：

这很整洁

如果您想这样做，就不能将

.tile\u inner

作为目标。

.tile\u inner

的边距不能影响其父级的边距

相反，您可以将

.active

作为目标，并更改填充而不是边距

.active:nth-child(3n+1)  {padding-top: 280px;}
.active:nth-child(3n+2)  {padding-top: 140px;}
.active:nth-child(3n+3)  {padding-top: 0;}

---

.

问题是，过滤后的项仍在DOM中，

n子项

也会计算隐藏元素，并且

n子项

不能像您预期的那样工作（正如您刚刚发现的：p）

我的建议是利用

arrangeComplete

事件，将

第一类

、

第二类

和

第三类

分配给可见元素

首先，用这些替换CSS

n个子项。我添加了一个小过渡，使它更平滑，但它不是完美的

.active.first .tile_inner  { transition: margin-top 0.2s linear; margin-top: 280px;}
.active.second .tile_inner { transition: margin-top 0.2s linear; margin-top: 140px;}
.active.third .tile_inner  { transition: margin-top 0.2s linear; margin-top: 0;}

然后注册

此外，我还必须在启动期间添加此项，以调用
arrangeComplete
事件，以便分配
第一个
、
第二个
和
第三个
类。当然，您可以通过自己设置类来避免这种情况。无论你喜欢什么：）

这是一个将所有东西拼凑在一起的工具。我希望这能帮助您开始。
您是否认为使用
。active:n个孩子（3n+1）
可以实现
：n个班级
？请参阅“arrangeComplete”仅在动画结束时触发，因此当您指定类时，列将有一点跳跃。@longchiwen这是真的，但这就是我们提供的所有事件。不管怎样，我刚刚看到了你的答案，效果更好；）谢谢你的详细解释，里卡多！正如你自己所说，龙池文的解释效果更好，但我感谢你的工作和信息！该死的CSS：（谢谢你，龙奇文，谢谢你的解决方案和工作的JSFIDLE！
$container.on('arrangeComplete', function(event, filteredItems) {
    $.each(filteredItems, function(i, e) {
        $(e.element).removeClass("first second third").addClass(function() {
            var modulus = i % 3;
            if(modulus == 0) {
                return "first";
            } else if(modulus == 1) {
                return "second";
            } else if(modulus == 2) {
                return "third";
            }
        });
    });
});

$container.isotope({ filter: '*' });