jquery - 砌体网格上的交替背景颜色

Question

我正在使用一个 WP 插件，该插件利用 Masonry.js 在砌体网格中显示帖子。我正在显示 2 行，每行三个大小均匀的“砖 block ”，并且需要每个“砖 block ”都有不同的背景颜色。

http://i.imgur.com/4MjhuRq.jpg (我需要的例子)

我已经尝试通过 JS 和 CSS 实现它，但它没有发生。

谁能提供最好的方法和工作示例？

谢谢

Answer 1

您可以使用 css 或 jquery

CSS:

.block:nth-child(even),.even{background-color:green}
.block:nth-child(odd),.odd{background-color:blue}

nth-child 选择器与相应的奇数/偶数类配对，因此您可以以任何一种方式使用相同的 css 属性。

jquery:

$('.block:odd').addClass('odd');
$('.block:even').addClass('even');

做了一个 fiddle :http://jsfiddle.net/filever10/6Q9UA/

我在 fiddle 中使用了这两种方法，任何一种都可以在现代浏览器中使用，但是如果你的目标是 nth-child 选择器无法使用的任何浏览器(比如 <=ie8 )，那么 jquery 就是一个简单的回退。