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

CSS not updating after Jquery script - Isotope asymmetrical filterable grid

本文关键字：不对称 同位素 过滤 网格 更新 脚本 CSS Jquery      更新时间：2023-09-26

我正试图用同位素创建一个非对称网格可过滤网格，其中非对称意味着每列都有不同的页边值：

.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中看到的那样：https://jsfiddle.net/9wrjx9wb/4/

该样式不是应用于瓷砖本身（它会扭曲同位素计算），而是应用于瓷砖内部的子元素。

现在，加载页面时，结果看起来不错，但一旦一个或多个过滤器被激活（通过单击顶部的标签），第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});
    });

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

这非常整洁。

如果你想这样做的话，你不能针对.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;}

看看这里的小提琴。

问题是，筛选后的项仍在DOM中，nth-child还计算隐藏元素，nth-child无法按预期工作（正如您刚刚发现的：p）。

我的建议是使用arrangeComplete事件，并为可见元素分配一个first、second和third类。

首先，用这些替换您的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;}

然后注册适当的事件

$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类。当然，你可以通过自己设置类来避免这种情况。无论您喜欢什么：）

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

这是一个把所有东西拼凑在一起的Fiddle。我希望这能帮助你开始。

相关文章：