随机化画廊阵列

Question

我正在尝试随机化图片库。 HTML 只包含图像，想法是获取数组，将其打乱并将它们添加到充当缩略图的 div。我从这里获取了改组代码（Durstenfeld 版本）：How to randomize (shuffle) a JavaScript array?

我的代码：

var pics = document.getElementsByTagName("img");

//the Durstenfeld shuffle
for (m = pics.length - 1; m > 0; m--) {
    var k = Math.floor(Math.random() * (m + 1));
    var temp = pics[m];
    pics[m] = pics[k];
    pics[k] = temp;
}

//giving ID to each image and adding them to a thumbnail div
for (e = 0; e < pics.length; e++) {
    pics[e].id = e;
    var photo = document.getElementById(e);
    var parent_section = photo.parentNode;
    var new_div = document.createElement("div");
    new_div.classList.add("thumbnail");
    new_div.appendChild(photo);
    parent_section.appendChild(new_div);
}

事实是，这在 IE 中工作得很好，但在我尝试过的所有其他浏览器中，图像只是按默认顺序放置（它们在 HTML 中的写入顺序).改组本身应该是正确的，所以我确定我的实现有问题，但我无法弄清楚。

Answer 1

您的数组不是数组。这样做：

var pics = Array.from(document.getElementsByTagName("img"));

随机化画廊阵列

Randomize gallery array

javascript

arrays

shuffle