网格列表动态排序教程按点击次数调整展示顺序

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

本文介绍如何使用原生 Ja vaScript 和 CSS Grid 的 order 属性，实时统计并按点击频次对政党图标列表进行升序/降序重排，实现“越受欢迎越靠前”的交互效果。

想让一个静态的图标列表“活”起来，根据用户的点击热度自动调整位置吗？这个需求听起来复杂，其实用原生 Ja vaScript 配合 CSS Grid 的一个小特性就能优雅实现。今天要聊的，就是如何在不改动 DOM 结构、不依赖任何框架的前提下，让列表项“越受欢迎越靠前”。

核心思路非常清晰，就三步：为每个列表项独立记录点击次数 → 点击时更新计数 → 触发一次基于计数的 DOM 重排。这里的关键在于“重排”的方式——直接操作 DOM 节点顺序成本太高，而 CSS Grid 的 `order` 属性提供了最轻量、最高效的解决方案。

✅ 推荐实现（稳定、可扩展、语义清晰）

下面的实现方案，完全基于你现有的 HTML 结构，无需修改 CSS 类名。它支持任意次数的点击，并能实时、稳定地进行自动排序。

⚠️ 注意事项与优化建议

方案虽好，但有几个坑点需要特别注意，避开它们才能保证效果稳定可靠。

• 警惕错误写法：网上有些示例会使用 `item.style.order -= 1` 这样的操作。这会导致 order 值变成负数并持续递减，最终引发数值溢出和排序彻底混乱，而且完全无法反映真实的点击量对比。
• 理解生效范围：`order` 是 CSS Grid 的专属属性，仅对 `display: grid` 容器的直系子元素生效。请确保你的 `.grid-container` 是父容器，且 `.grid-item` 是其直接子元素。从你的结构看，这一点是符合的。
• 考虑数据持久化：如果希望用户刷新页面后，点击数据不丢失，可以轻松结合 `localStorage` 来实现：

  // 保存（在 incrementClicks 函数末尾添加）
  localStorage.setItem('partyClicks', JSON.stringify(Object.fromEntries(clickCounts)));
  
  // 加载（在 DOMContentLoaded 事件处理中）
  const sa ved = localStorage.getItem('partyClicks');
  if (sa ved) Object.entries(JSON.parse(sa ved)).forEach(([k, v]) => clickCounts.set(k, v));

• 性能与体验优化：即使面对上百个元素，`sort()` 配合 `forEach` 的排序和渲染依然非常高效。如果未来想增加排序时的动画过渡效果，只需要在 `.grid-item` 的 CSS 中添加一行：`transition: order 0.3s ease;`。

✅ 总结

总的来说，你只需要将上面的 `