Javascript 同位素砌体布局模式的特定于柱的样式

我有一个同位素画廊，布局为砖石结构：

JS:

CSS:

---

基本上将画廊分成两列。在这种情况下，有没有办法添加第一列/第二列特定的样式？也就是说，我希望第一列的所有图像都有一个绿色边框，第二列的图像有一个红色边框。提前谢谢

假设

.grid

元素的子元素的顺序保持不变，您可以通过为

.grid

类名应用CSS选择器来解决此问题，如下所示：

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

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

---

请注意，我正在使用

奇数

和

偶数

值来获得理想的结果。

假设

.grid

元素的子元素的顺序保持不变，您可以通过为

.grid

类名应用CSS选择器来解决这个问题，如下所示：

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

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

---

请注意，我正在使用

奇数

和

偶数

值来获得理想的结果。

似乎可以使用CSS设置第一列元素的样式：

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

---

假设左列项目的left属性设置为0。

似乎可以使用CSS设置第一列元素的样式：

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

---

假设左列项的left属性设置为0。

我不认为这在所有情况下都有效，但您可以尝试使用

。网格项：第n个子项（偶数）{border color:red}

。如果这还不够，您将需要使用JS对每个项目进行迭代，并检查其左偏移量，以确定它是否位于左列或右列，然后添加一个类。@TED Whitehead，奇数/偶数无效，您是对的（这毕竟是一个mansory布局）。好像只剩下JS了！是的，我想这是你最好的选择。只要确保在每次砌体更新@TedWhitehead后重新运行JS，下面答案中的Denialos建议根据

left

值添加一个类（假设第一列元素有1%）。有没有一种方法可以连接到同位素事件中，在那里添加一个类，而不是对布局更改进行计算，你觉得怎么样？@TedWhitehead，类似于

的选择器。网格项[style*=“left:0；”]

在没有JS的情况下完成了这项任务。坦斯克！我不认为这在所有情况下都有效，但您可以尝试使用

.grid item:nth child（偶数）{border color:red}

。如果这还不够，您将需要使用JS对每个项目进行迭代，并检查其左偏移量，以确定它是否位于左列或右列，然后添加一个类。@TED Whitehead，奇数/偶数无效，您是对的（这毕竟是一个mansory布局）。好像只剩下JS了！是的，我想这是你最好的选择。只要确保在每次砌体更新@TedWhitehead后重新运行JS，下面答案中的Denialos建议根据

left

值添加一个类（假设第一列元素有1%）。有没有一种方法可以连接到同位素事件中，在那里添加一个类，而不是对布局更改进行计算，你觉得怎么样？@TedWhitehead，类似于

的选择器。网格项[style*=“left:0；”]

在没有JS的情况下完成了这项任务。坦斯克！谢谢，但这行不通。否则，我为什么需要砖石布局？：-）是的，你说得对。也许有一种方法可以根据某些条件为每个砌体元素添加自定义类名？例如，如果块的左坐标

为零，则它应该位于第一列中。这样，它可以有一个特定的类名。假设砖石也会在调整大小时更新此选项，那么无论如何，您都可以使用CSS获得一个干净的解决方案。我自己不是砖石的大用户，只是想知道这里。：）谢谢，但这行不通。否则，我为什么需要砖石布局？：-）是的，你说得对。也许有一种方法可以根据某些条件为每个砌体元素添加自定义类名？例如，如果块的左坐标
为零，则它应该位于第一列中。这样，它可以有一个特定的类名。假设砖石也会在调整大小时更新此选项，那么无论如何，您都可以使用CSS获得一个干净的解决方案。我自己不是砖石的大用户，只是想知道这里。：）