我正试图用同位素创建一个非对称网格可过滤网格,其中非对称意味着每列都有不同的页边值:
.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。我希望这能帮助你开始。