使用网格牧羊人技术与CSS订购数据
牧羊人擅长照料他们的羊群,为羊群带来秩序和结构。即使有数百只羊,牧羊人仍然会在一天结束时将它们赶回农场。
在处理数据时,程序员常常不知道数据是否被正确过滤或排序。当迭代数组然后在页面上显示数据时,尤其痛苦,因为不知道接收每个元素的位置。Grid Shepherd 是一种技术,它使用 CSS Grid 而不是 JavaScript 来帮助您将项目定位和排序到您想要的位置。
这就是我们将在本文中探讨的内容。Grid Shepherd 技术可以为我们处理的数据带来秩序和结构,同时让我们比以往更清楚地了解数据的使用位置和方式。
让我们深入了解。
使用 JavaScript 排序
我们将从迭代一个无序的农场动物数组开始。想象一下,奶牛和绵羊快乐地在田野里吃草。它们可以使用 Array.prototype.sort
方法以编程方式组合在一起,并在页面上列出:
let animals = [ { name: 'Edna', animal: 'cow' }, { name: 'Liam', animal: 'sheep' }, { name: 'Fink', animal: 'sheep' }, { name: 'Olga', animal: 'cow' }, ]; let sortedAnimals = animals.sort((a, b) => { if (a.animal > b.animal) return 1; return 0; }); console.log(sortedAnimals); /* 返回: [ { name: 'Elga', animal: 'cow' }, { name: 'Olga', animal: 'cow' }, { name: 'Liam', animal: 'sheep' }, { name: 'Fink', animal: 'sheep' } ] */
了解 Grid Shepherd
Grid Shepherd 方法使得无需使用 JavaScript即可对数据进行排序。相反,我们依靠 CSS Grid 来为我们完成这项工作。
结构与上面的 JavaScript 对象数组完全相同,只是用 DOM 节点表示。
<main><div>Edna</div> <div>Liam</div> <div>Jenn</div> <div>Fink</div> </main>
为了管理这些动物,我们必须将它们围在一个公共区域内,这就是我们使用 <main></main>
元素的原因。通过设置 display: grid
,我们创建了一个网格格式化上下文,我们可以在其中定义每个动物应该占据的列(或行)。
.sheep { grid-column: 1; } .cow { grid-column: 2; }
使用 grid-auto-flow: dense
,每个动物都会自动排列到每个已定义区域的第一个可用位置。这也可以与任意数量的不同排序选项一起使用——只需定义另一列,数据就会神奇地被排序到其中。
main { display: grid; grid-auto-flow: dense; } .sheep { grid-column: 1; } .cow { grid-column: 2; }
高级牧羊
我们可以使用 CSS 计数器进一步改进我们的管理示例。这样,我们可以计算每列中动物的数量,并——应用 Heydon Pickering 在 Lea Verou 2011 年的演讲中提出的数量查询——根据数量有条件地设置样式。
数量查询依赖于某种用于计数类的选择器——这对于 :nth-child(An B [of S]?)
伪类表示法来说是很好的,但它目前仅在 Safari 中可用)。这意味着我们必须使用 :nth-of-type()
选择器作为变通方法。
我们需要一些新的元素类型才能使其工作。这可以通过 Web Components 或将任何 HTML 元素重命名为自定义名称来实现。即使这些元素不在 HTML 规范中,这也适用,因为浏览器使用 HTMLUnknownElement
来表示未定义的标签,这导致它们的行为与 div
非常相似。文档现在如下所示:
<fence><sheep>Lisa</sheep><sheep>Bonnie</sheep><cow>Olaf</cow><sheep>Jenn</sheep></fence>
现在我们可以访问我们的自定义元素类型了。当绵羊或奶牛的数量等于或小于 10 时,让我们应用红色背景。
sheep:nth-last-of-type(n 10), sheep:nth-last-of-type(n 10) ~ sheep, cow:nth-last-of-type(n 10), cow:nth-last-of-type(n 10) ~ cow, { background-color: red; }
此外,计数器可以通过在父元素上使用 counter-reset: countsheep countcow;
并使用 before
选择器来定位每个元素并向上计数来简单地实现。
sheep::before { counter-increment: countsheep; content: counter(countsheep); }
在这里,我们将使用 Vue 来动态添加和删除动物,使用 Vue 过渡和两个不同的排序选项。观察动物如何自然地占据正确的列,即使添加更多动物并删除一些动物也是如此:
Grid Shepherd 也可以用于任何无序数据来:
- 分离并计算民意调查中的投票者(可能作为两个部分,以及它们相应的个人资料图片)并进行实时插入;
- 根据职位、年龄、身高对人员/同事进行分组;以及
- 创建任何层次结构
管理和可访问性
grid-auto-flow: dense
不会更改网格的 DOM 结构——它只是在视觉上重新排序包含的元素。在按字母顺序排序的最后一个示例中可以看到一个副作用,因为计数器数字被混合在一起。更改 DOM 结构不仅会影响使用屏幕阅读器的人,还会影响选项卡遍历。
还要注意,扁平的文档结构可能不利于屏幕阅读器。相反,我会将这些演示网格视为图形,并提供更长的文本替代信息。
收尾!
看到像网格这样的强大的 CSS 布局工具如何被用于传统布局需求之外的用例,并进入过去可能需要其他语言的领域,这非常巧妙。在这种情况下,我们可以看到 CSS Grid 的布局优势和 JavaScript 的动态数据处理能力如何重叠,以及这如何为我们提供更多选择——以及权力——来根据我们的意愿弯曲渲染的数据。
以上是使用网格牧羊人技术与CSS订购数据的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...
