列特定风格

我有一个砖石布局同位素画廊：列特定风格

JS：

$('.grid').isotope({ 
    itemSelector: '.grid-item', 
    layoutMode: 'masonry' 
});

CSS：

.grid-item { 
    width: 50%; 
}

这基本上将画廊分为两列。有什么方法可以在案例中添加第一/第二列特定样式？即我希望第一列的所有图像都有绿色的边框，第二列的图像是红色的。提前致谢！

来源

2017-07-14 sdvnksv

我不认为这会工作，所有的情况，但你可以尝试使用'.grid-item：nth-child（偶数）{border-color：red}'。如果这还不够，您需要使用JS遍历每个项目并检查其左偏移量以确定它是在左列还是右列，然后添加一个类。 –

@TedWhitehead，奇数/偶数不起作用，你是对的（毕竟这是一个mansory布局）。似乎它只剩下JS了！ – sdvnksv

是的，我认为这是你最好的选择。只要确保在每次砌体更新后重新运行JS; https://masonry.desandro.com/events.html#layoutcomplete –

假设.grid元素的子元素的顺序将保持不变，您可以像下面为.grid的className应用CSS选择器解决这个问题：

.grid > div:nth-of-type(odd) { 
    border: 1px solid green; 
} 

.grid > div:nth-of-type(even) { 
    border: 1px solid red; 
}

请注意，我用odd和even值为nth-of-type以获得理想的结果。

来源

2017-07-14 20:08:08 Denialos

谢谢，但这是行不通的。否则，为什么我需要砌体布局？ :-) – sdvnksv

是的，你是对的。也许有一种方法可以为每个砌体元素添加自定义className，具体取决于某些条件？就像，如果你的块有一个零“左”的坐标，它应该在第一列。这样，它可以有一个特定的className。假设砌体更新这个调整大小，也可以用CSS干净的解决方案。我自己并不是砌体的大用户，只是想知道这里。 :) – Denialos

非常感谢，谢谢！ – sdvnksv

这似乎是可能的风格和CSS第一列元素：

.grid-item[style*="left: 0;"] { 
    border-color: green; 
}

采取的左栏项目有一个左属性设置为0

来源

2017-07-15 07:40:08 sdvnksv

回答

相关问题