创建特定图像并将它们放置在 div 内的随机位置

Question

Using the code submitted here，我怎么能做类似的事情，但使用特定数量的几个不同的图像，而不是一个图像重复 x 次。

$(document).ready(function(){
var ticket="<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>";
var numTickets=10;
for(var x=1;x<=numTickets;x++){
    $(ticket).appendTo("body");
}
// get window dimentions
var ww = $(window).width();
var wh = $(window).height();
$(".ticket").each(function(i){
    var posx = Math.round(Math.random() * ww)-20;
    var posy = Math.round(Math.random() * wh)-20;
    $(this).css("top", posy + "px").css("left", posx + "px")
});
});

我编辑了 2pha 的代码以摆脱旋转，因为这就是我所追求的，但我不知道我会编辑它以生成一组特定的图像。

这里是an edited Fiddle to show what I'm talking about

非常感谢:)

Answer 1

这是你需要的吗？ （为了节省时间，我只换了一张图片） https://jsfiddle.net/9wuu4fph/

基本上，您可以构建一个包含 7 个不同图像的数组，然后在每次循环迭代中随机选择一个，然后将其从数组中删除（这样就不会再次被选中）。

数组（最好只有图片url，循环创建dom元素）：

var tickets = [
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddies272.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
];

循环：

// We need to retain original length, to run loop X times
var ticketsOriginalLength = tickets.length;

for (var x = 0; x < ticketsOriginalLength; x++) {
    // Use updated length, or else index out of bounds errors
    var rand = getRandomInt(0, tickets.length - 1);
    $(tickets[rand]).appendTo("body");
    // Remove image from array
    tickets.splice(rand, 1);
}

'随机'函数：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}