Question

我正在尝试使用Isotope创建一个不对称的网格可过滤网格，其中不对称意味着每列具有不同的margin-top值：

.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类的元素）。

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

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

小提琴在这里：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类。

首先，用这些替换你的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类。您当然可以通过自己设置课程来避免这种情况。无论你喜欢什么：）

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

这里有Fiddle将所有内容拼凑在一起。我希望这可以帮助你开始。

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

3 个答案: