Question

我对随机位置有疑问。我制作了一个在页面上随机设置<li>的脚本。你可以在这里看到它：Click here

但问题是。项目重叠。我想用一个数组制作这个脚本。我想要一个固定位置的阵列。总共有8件商品。这八个项目都有一个固定的位置。

我该怎么做？如何制作具有修复位置的数组？

这是我的代码：

var images = [];

function init() {
    $('.friend-selection li > div').each(function(){

        var id = this.id;
        var img = $('#img_' + id);
        var randomTop = 400*Math.random(); //random top position
        var randomLeft = 500*Math.random()+1; //random left position

        $("#parent_" + id).css({ //apply the position to parent divs
            top     : randomTop,
            left    : randomLeft
        });
    });
};

init();

Answer 1

将项目按顺序放入数组中，这样就不会覆盖已经填充的位置，并使用Shuffle以随机顺序对数组进行随机播放。

但是由于Javascript中没有这样的功能，你可以自己编写一个。这样的事情会起作用。

shuffle = function(o){
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};


alert(shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]));

http://jsfiddle.net/uxnn7/

Answer 2

我假设您有一组8个固定的，非重叠的位置，您希望随机且唯一地使用这些位置：

var images = [];

// Constructor for the "Position" structure
function Position(left, top) {
    this.left=left;
    this.top=top;
}

// sortFunction routine to help randomize array
function rand(ar){
    return 0.5-Math.random();
}

// Array containing the 8 positions you want to use
var positionArray = [
      new Position(0,  0) 
    , new Position(50, 50) 
    , new Position(100,100) 
    , new Position(150,150) 
    , new Position(200,200) 
    , new Position(250,250) 
    , new Position(300,300) 
    , new Position(350,350) 
];

function init() {
    $('.friend-selection li > div').each(function(){

        var id = this.id;
        var img = $('#img_' + id);
        var imageIndex = parseInt(id.substring(id.length - 1)); // This is a hack because you're using "picture*" as the id

        $("#parent_" + id).css({ //apply the position to parent divs
            top     : positionArray[imageIndex].top,
            left    : positionArray[imageIndex].left
        });
    });
};


// Randomize array - http://stackoverflow.com/questions/7802661
positionArray.sort(rand);

init();

具有随机位置的数组

2 个答案: