Javascript 在队列中，每次刷新页面时都会对DOM元素进行洗牌

我要洗牌

<ul class="abc">
    <li class="xyz">1</li>
    <li class="xyz">2</li>
    <li class="xyz">3</li>
    <li class="xyz">4</li>
    <li class="xyz">5</li>
    <li class="xyz">6</li>
    <li class="xyz">7</li>
    <li class="xyz">8</li>
    <li class="xyz">9</li>
    <li class="xyz">10</li>
</ul>

1
2
3
4
5
6
7
8
9
10

---

我想洗牌，就像我第一次刷新UI显示6,7,8,9,10或以任何顺序，但不显示第一个1,2,3,4,5这些显示在第一个项目下面。下次刷新页面时，在第一个列表项下再次显示1,2,3,4,5，现在显示6,7,8,9,10。我使用了math.random（）函数，但它不能正常工作，只能交换2或3个列表项。我想要一组（1到5个）交换6到10个位置，再交换6到10个1到5个位置，依此类推，我还在我的网站上使用无限滚动延迟加载

向我们展示“刷新功能”，您也可以查看共享您的代码您为此实现尝试了什么我有100个产品列表。在这个列表中，有图像、标题、价格等可以从shopify的数据库中动态呈现。现在在首页的前视图中，我呈现了这个列表。所以第一次显示前5个列表项（产品）。我的要求是当我下次刷新页面时，从列表中显示新的5个项目。我不想要前5个项目中的任何项目。比如wish.com