如何在頁面上隨機放置幾個元素？

Question

我想使用Javascript / jQuery在頁面上隨機放置一個類的幾個元素。 我的想法是為margin-top，margin-left和z-index生成隨機值。 問題是我需要生成介於負數和正數之間的值（例如，從-150px到300px），而且我不知道如何使用我使用的代碼來實現：

$(".randomnumber").each(function () {
    var randomtop = Math.floor(Math.random() * 101);
    var randomleft = Math.floor(Math.random() * 101);
    var randomzindex = Math.floor(Math.random() * 101);
    $(this).css({
        "margin-top": randomtop,
        "margin-left": randomleft,
        "z-index": randomzindex
    });
});

http://jsfiddle.net/7JGqZ/651/

所以我有問題：

1. 不知道如何使它與負值一起使用-例如，我需要將上邊距設置為-150px至300px。

2. 小提琴中的元素有些奇怪，例如它們的位置並不是真正隨機的，或者它們彼此連接在一起...

更新：

使它工作，但仍然不喜歡結果，我實際上希望元素被隨機放置，以便它們適合頁面大小，我的意思是元素將被放置在整個頁面上，而不會超出頁面邊緣的距離這一頁。 現在，我有一個固定在頁面中心的父元素（寬度和高度= 0，頂部和底部= 50％），我的想法是放置其子元素以生成頂部和左邊距，如下所示：

$(document).ready(function(){
    $(".mood-img").each(function () {
        var height = $(window).height();
        var halfheight = height/2;
        var margintop = halfheight-400;
        var width = $(window).width();
        var halfwidth = width/2;
        var marginleft = halfwidth-500;
        var randomtop = getRandomInt(halfheight, margintop);
        var randomleft = getRandomInt(halfwidth, marginleft);
        var randomzindex = getRandomInt(1, 30);


        $(this).css({
            "margin-top": randomtop,
            "margin-left": randomleft,
            "z-index": randomzindex
        });
    });

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

http://jsfiddle.net/7JGqZ/657/

Answer 1

對於＃1，您可以生成0到450之間的隨機數，然后減去150

$(".randomnumber").each(function () {
    var randomtop = Math.floor(Math.random() * 450 - 150);
    var randomleft = Math.floor(Math.random() * 450 - 150);
    var randomzindex = Math.floor(Math.random() * 450 - 150);
    $(this).css({
        "margin-top": randomtop,
        "margin-left": randomleft,
        "z-index": randomzindex
    });
});

更新了jsFiddle

如果希望將元素隨機放置在整個屏幕上而不重疊邊緣，則可以使用以下方法代替： 演示 （我也做了一些清理）

至於＃2，在編碼方面沒有真正的隨機性。 大多數隨機變量（例如Math.random都是從時間派生的。 從Mozilla ：

返回范圍為[0,1）的偽隨機數，即介於0（含）和1（不含）之間。 像Java一樣，隨機數生成器從當前時間開始。

這些數字在javascript中盡可能隨機。 谷歌 的更多信息 和 候補 ，如果你不相信我

為了演示Math.random工作原理，我編輯了該項目以允許使用numElems設置的任意數量的元素。 嘗試幾次，效果很好。 在這里演示

編輯

我還建議使用scrollHeight和scrollWidth ，而不是使用jQuery的width()和height()因為它更具包容性，因此可以提供更准確的top值