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

Question

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

.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;}

这样，列会稍微移位，正如您在我制作的这个 Jsfiddle 中看到的那样： https://jsfiddle.net/9wrjx9wb/4/

该样式不是应用于图块本身（它会破坏同位素计算），而是应用于它们内部的子元素。

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

为什么会这样？我错过了什么吗？

Answer 1

您不能在此处使用 nth-* 选择器，因为它会计算所有兄弟姐妹（不仅仅是 .active 兄弟姐妹）。您可以手动设置一点边距 javascript:

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

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

Fiddle 在这里：https://jsfiddle.net/yc1ax79b/3/

Answer 2

这很整洁。

如果你想这样做，你不能定位 .tile_inner。 .tile_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;}

Check out the fiddle here.

Answer 3

问题是，过滤后的项目仍在 DOM 中，nth-child 也计算隐藏元素，并且 nth-child 无法像您预期的那样工作（如你刚找到 :P).

我的建议是利用 arrangeComplete 事件并为可见元素分配 first、second 和 third class。

首先，用这些替换你的CSS nth-child。我添加了一点过渡以使其更平滑，但它并不完美。

.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;}

然后注册appropriate event

$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";
            }
        });
    });
});

我还必须在启动期间添加它以调用 arrangeComplete 事件，以便分配 first、second 和 third classes .您当然可以通过自己设置 class 来避免这种情况。无论你喜欢什么:)

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

这里有一个 Fiddle 将所有内容拼凑在一起。我希望这可以帮助您入门。

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

CSS not updating after Jquery script - Isotope asymmetrical filterable grid

javascript

jquery

html

css

jquery-isotope