Javascript随机化图像（不显示相同的图像）答案

【问题标题】：Javascript Randomize Images ( without showing the same image )Javascript随机化图像（不显示相同的图像）
【发布时间】：2021-02-26 06:25:20
【问题描述】：

我的作品集网站上有一个画廊，它以砖石类型的网格显示我的所有照片。现在我想随机化这些图片而不显示它们超过一次！所以我在图库中没有相同的图像。

// place your images in this array
var random_images_array = [
  'Laundry_Shoot (1).JPG',
  'Laundry_Shoot (5).JPG',
  'Laundry_Shoot (10).JPG',
  'Laundry_Shoot (28).JPG'
];

function getRandomImage(imgAr, path) {
  path = path || 'images/portfolio/'; // default path here
  var num = Math.floor(Math.random() * imgAr.length);
  var img = imgAr[num];
  var imgStr = '<img src="' + path + img + '" alt = "">';
  document.write(imgStr);
  document.close();
}

<!-- END FILTER BUTTONS -->
<div class="gallery">
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
</div>
</div>

【问题讨论】：

只需shuffle the array 一次并从左到右使用元素，使用全局索引变量来跟踪使用的最后一个元素。
@ibrahimmahrir “使用全局索引...” - 为什么？只需.shift()（或.pop()）数组中的图像。
@Andreas OP 可能想稍后使用这些图像，并且索引变量不一定是全局变量，例如它可以隐藏在 IIFE 中。
@dylan 你为什么使用多个脚本标签？为什么不生成那些 img.filterDiv.film.portret 并直接将它们附加到 dom 中？

标签： javascript html css typescript image

【解决方案1】：

你可以使用这个函数“洗牌”你的数组：

random_image_array.sort(() => Math.random() - 0.5);

【讨论】：

【解决方案2】：

您可以尝试使用Math.random() 和Math.floor() 函数，如下所示。

// stores all img paths
const imgs = [
  // your image paths go here
]

function chooseRandomImg() {
  // picks a random index
  const i = Math.floor(Math.random() * (imgs.length));
  
  // gets the img element from the HTML file
  const imgEle = document.getElementById("img-id");

  // sets the source of the img element to a random path from the imgs array
  imgEle.src = imgs[i];
}

// when the page is loaded, this picks a random img
window.onload = function () {
  chooseRandomImg();
}

在您的 HTML 文件中，创建一个 <img/> 元素，如果 document.getElementById() 中的 ID 与 <img/> 元素 ID 匹配，这应该可以正常工作。

<img id="img-id" width="50" height="50"/>

有一个与此类似的教程，但在 freecodecamp.org 上有文字。

【讨论】：