:nth-child 和无限滚动

Posted 2023-03-05

【中文标题】:nth-child 和无限滚动

【英文标题】：:nth-child and infinite scroll

【发布时间】：2013-12-31 14:11:15

【问题描述】：

在site I'm creating 上，我们有一个项目网格，所有行都可以正常浮动，因为 CSS 的这个小 sn-p：

.collection .grid-item:nth-child(3n+1) clear: left;

这使得每行中的第一项成为clear:left，这允许新行从最高行的高度结束处开始。

这很好用。

但是，当我尝试添加无限滚动时，它会破坏网格。无限滚动是在网格中添加两个项目display:none 项目、分页和加载栏。

由于某种原因，clear:left 的 css 正在识别这两个元素，并在加载到网格的每个页面上在网格中创建两个间隙。

关于如何解决这个问题的任何想法？

【问题讨论】：

我遇到了同样的问题。我必须使用 jQuery 来计算“可见”项目，然后在该计数中的每 4 个项目中添加一个类以清除它。这是我问的问题：***.com/questions/20557240/… gilly3 给了我解决方案：jsbin.com/OVewUkaM/2/edit

【参考方案1】：

:nth-child 将平等对待.grid-item 的每个子元素，因此您的分页和加载栏符合条件。尝试将寻呼机和加载程序移到 .grid-item 之外。

【讨论】：

我没有意识到它选择了该选择器中的孩子。 .grid-item 是我要单独选择的网格中项目的选择器。如果我不能移动这些物品怎么办？有没有办法只选择这些项目？？？忽略那些我不想合并的。

它不会选择与.grid-item 不匹配的项目，因此不会将样式应用于这些项目。但是，这些项目仍然会影响其周围项目的 index（它不仅仅作用域匹配选择器以进行索引的项目）。