时间戳

首页 > 解决方案 > 使用 JS 随机排序 div 元素列表

javascript - 使用 JS 随机排序 div 元素列表

问题描述

我有一个包含 200 多个新闻站点的类​​别，在主页上我显示了最后 20 个新闻站点。

<div class="container-category">
   <div class="col-3">item 1</div>
   <div class="col-3">item 2</div>
   <div class="col-3">item 3</div>
   <div class="col-3">item 4</div>
   <div class="col-3">item ..n</div>
</div>

如何<div class="col-3">使用 Javascript 使列表随机出现？

OrderBy = random

标签： javascriptjqueryrandom

解决方案

打乱类别的理想方法是通过后端。但如果你不能，我们可以在这里借用洗牌功能。

使用 jQueryget()获取类别 div 的数组。使用该函数对数组进行洗牌并用于html()更新内容。

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

var categories = shuffle($(".container-category>div").get());
$(".container-category").html(categories);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-category">
  <div class="col-3">item 1</div>
  <div class="col-3">item 2</div>
  <div class="col-3">item 3</div>
  <div class="col-3">item 4</div>
</div>

推荐阅读