如何依据点击次数对网格列表实现动态排序

作者：袖梨 2026-06-04

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

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

要实现「按点击量排序」，核心思路是：为每个列表项独立记录点击次数 → 点击时更新计数 → 触发一次基于计数的 DOM 重排。直接操作 order 样式属性是最轻量、无需 DOM 移动的方案，尤其适合 CSS Grid 布局。

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

以下代码在保留你原有 HTML 结构的基础上进行了增强，无需修改 CSS 类名，且支持任意多次点击与自动重排：

<!-- 在页面底部或 <script> 标签中 --><script>// 1. 初始化点击计数器（使用 Map 避免全局污染）const clickCounts = new Map();// 2. 点击处理函数：累加计数 + 触发重排function incrementClicks(element) {  const id = element.id;  const current = clickCounts.get(id) || 0;  clickCounts.set(id, current + 1);  sortGridByClicks();}// 3. 主排序逻辑：按点击数降序排列（高点击→靠前），点击数相同时保持原始顺序（稳定排序）function sortGridByClicks() {  const container = document.getElementById('Partijensort');  const items = Array.from(container.children);  // 按点击数降序，相同点击数时按原始 DOM 顺序（使用索引作为第二排序键）  items.sort((a, b) => {    const countA = clickCounts.get(a.id) || 0;    const countB = clickCounts.get(b.id) || 0;    if (countA !== countB) return countB - countA; // 降序：大数在前    return items.indexOf(a) - items.indexOf(b); // 保持稳定  });  // 4. 批量应用 order 属性（注意：order 值越小越靠前，所以用索引 0,1,2...）  items.forEach((item, index) => {    item.style.order = index;  });}// 5. 页面加载后初始化所有 item 的 order（避免首次无序）document.addEventListener('DOMContentLoaded', () => {  const container = document.getElementById('Partijensort');  Array.from(container.children).forEach((item, i) => {    item.style.order = i;  });});</script>

⚠️ 注意事项与优化建议

不要用 li.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 saved = localStorage.getItem('partyClicks');if (saved) Object.entries(JSON.parse(saved)).forEach(([k, v]) => clickCounts.set(k, v));