jQuery Infinite Scroll + Masonry + CSS Media Queries + n-child

Question

我遇到了一个不寻常的问题。

我在网站上使用jQuery Masonry和Infinite Scroll。

http://masonry.desandro.com/

http://www.infinite-scroll.com/

该网站也是响应式的，因此在某些断点（480px，768px等）中，我添加了一些样式以使用nth-child选择器更改框的顺序。为了详细说明，每个砖石砖包含两个方块，根据屏幕尺寸切换到左侧或右侧。所以你会看到这样的东西：

#main-content article:nth-child(2) .first,
#main-content article:nth-child(2n+8) .first {
    left: 0;
}
#main-content article:nth-child(2) .second,
#main-content article:nth-child(2n+8) .second {
    left: 15em; /* 240px / 16px = 15em */
}

问题是，当Infinite Scroll拉入我的其他帖子时，这些n-child样式不会被应用......留下一个非常难看的设计。

无论如何，我可以强制Infinite Scroll应用我的媒体查询中的所有内容吗？是否有一个回调函数允许我强制无限滚动接受我的n-child样式或重新加载styles.css？

非常感谢任何帮助。谢谢，

Answer 1

我的白痴错误。

发生了什么，Infinite Scroll在容器中添加了#loading ...因为我使用的是nth-child而不是nth-of-type ......我的样式包含了那个元素。

一切都很好。