如何在页面刷新时重新排序div元素？附示例需求

Great question! To make your divs reorder randomly each time the page loads, you can use JavaScript to shuffle them dynamically. Here's a straightforward, reliable approach:

Step 1: Structure Your HTML with a Parent Container #

First, wrap your target divs in a parent container (like a div with an ID) so we can easily grab and rearrange its children. This keeps things clean and scalable if you add more divs later:

<div id="div-container">
  <div class="class1"><a href="1.html">first</a></div>
  <div class="class2"><a href="1.html">second</a></div>
  <div class="class3"><a href="1.html">third</a></div>
</div>

Step 2: Add JavaScript to Shuffle and Reorder #

We’ll use the Fisher-Yates shuffle algorithm (it’s more fair than a simple random sort) to rearrange the divs, then reattach them to the parent container when the page loads. Add this script either at the end of your <body> tag or wrap it in a DOMContentLoaded listener:

// Wait for the page to fully load before manipulating elements
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('div-container');
  const divs = Array.from(container.children);
  
  // Fisher-Yates shuffle to create a truly random order
  for (let i = divs.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [divs[i], divs[j]] = [divs[j], divs[i]];
  }
  
  // Clear the container and append the shuffled divs
  container.innerHTML = '';
  divs.forEach(div => container.appendChild(div));
});

How This Works #

• DOMContentLoaded ensures the code runs only after all HTML elements are loaded, so we don’t try to manipulate elements that don’t exist yet.
• Array.from(container.children) converts the container’s child elements into an array, which we can shuffle.
• The Fisher-Yates loop swaps elements in place to create an unbiased random sequence (unlike simpler random sort methods that can produce skewed results).
• We empty the container and re-add the shuffled divs to update the page’s order.

Every time you refresh the page, the divs will appear in a new random sequence—like 2-3-1, 3-1-2, or any other permutation.

内容的提问来源于stack exchange，提问作者user9471107