本文介绍如何使用原生 javascript 或 jquery 实现页面首次加载（非刷新）时对指定容器内的子元素进行一次随机排序，避免因自动重定向导致的无限跳转问题。
本文介绍如何使用原生 javascript 或 jquery 实现页面首次加载（非刷新）时对指定容器内的子元素进行一次随机排序，避免因自动重定向导致的无限跳转问题。
在网页开发中，常有需求让一组 DOM 元素（如卡片、图标、数字块等）在用户首次访问该页面时随机排列，而非每次刷新都重新打乱——尤其当“新页面访问”指从外部链接进入、或浏览器历史前进/后退触发的导航时。你原始代码中的核心问题在于：$(document).ready() 内执行了 window.location.href = window.location.href，这会强制页面立即重载，形成死循环，不仅无法区分“新访问”与“刷新”，还严重影响用户体验和性能。
✅ 正确思路：仅在首次访问时执行一次打乱
关键在于识别“新页面访问”。最可靠且轻量的方式是利用 sessionStorage 标记当前会话是否已执行过打乱：
// 使用原生 JavaScript（推荐，无需 jQuery）
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('shuffle');
if (!container) return;
// 检查 sessionStorage 中是否存在标记
if (!sessionStorage.getItem('shuffled_once')) {
const children = Array.from(container.children);
// Fisher-Yates 洗牌算法（高效且均匀）
for (let i = children.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[children[i], children[j]] = [children[j], children[i]]; // ES6 解构交换
}
// 重新按随机顺序追加子元素
children.forEach(el => container.appendChild(el));
// 设置标记，确保本会话内仅执行一次
sessionStorage.setItem('shuffled_once', 'true');
}
});? 为什么用
sessionStorage？
它在用户关闭标签页后自动清除，符合“每次新页面访问”的语义（同一标签页内刷新不重复，新开标签页则重新打乱），且无需服务端支持、无隐私风险。
? jQuery 版本（兼容旧项目）
如果你偏好 jQuery，可封装为可复用函数，并同样配合 sessionStorage 控制执行时机：
function shuffleChildren($container) {
const $children = $container.children();
const arr = $children.get(); // 转为原生数组以便操作
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
$.each(arr, (i, el) => $container.append(el));
}
$(document).ready(function() {
const $shuffle = $('#shuffle');
if ($shuffle.length && !sessionStorage.getItem('shuffled_once')) {
shuffleChildren($shuffle);
sessionStorage.setItem('shuffled_once', 'true');
}
});⚠️ 注意事项与最佳实践
- ❌ 不要用
location.reload()或修改href触发重载：这是原始代码的根本错误，会导致不可控跳转、SEO 不友好、破坏浏览器历史。 - ✅ 优先使用 Fisher-Yates 算法：相比
sort(() => Math.random() - 0.5)，它能保证各排列概率严格均等，避免偏置。 - ? 样式兼容性：确保 CSS 中
#shuffle > div的浮动/布局方式能适应动态重排（示例中float: left可正常工作；若用 Flex/Grid，需确认order属性未被意外覆盖）。 - ? 跨域与隐私模式：
sessionStorage在隐私模式下可用，但某些极端限制环境可能禁用。如需更强健性，可降级为Math.random()+ 时间戳哈希作为轻量 fallback（不推荐用于安全敏感场景）。
✅ 效果验证
将上述任一代码嵌入页面 <script></script> 标签，配合你的 HTML 结构，即可实现：
- 用户首次打开
example.com/page.html→ 元素随机排列； - 同一标签页内按 F5 刷新 → 顺序保持不变；
- 新开标签页访问 → 再次随机打乱；
- 浏览器前进/后退 → 不触发重排（因
sessionStorage仍有效）。
通过合理利用客户端存储与标准洗牌算法，你就能优雅、高效地实现“每次新页面访问时打乱 div”的需求。
