javascript - 如何在页面上随机放置多个元素？

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. 不知道如何让它与负值一起工作 — 例如，我需要将上边距从 -150 像素到 300 像素。

2. fiddle 中的元素有点奇怪，好像它们的位置并不是真正随机的，或者它们彼此相连......

更新:

让它工作，但仍然不喜欢结果，我实际上希望元素随机放置以便它们适合页面大小，我的意思是元素将放置在整个页面上，而不是超出太多页面的边缘。现在我有一个固定在页面中心的父元素(宽度和高度 = 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
    });
});

Updated jsFiddle

如果您希望元素在整个屏幕上随机放置而不重叠边缘，您可以使用以下代替:Demo (我也清理了一下)

至于 #2，在编码方面没有真正的随机性。大多数随机数，如 Math.random 都是从时间派生的。 From Mozilla :

Returns a pseudo-random number in the range [0,1) — that is, between 0 (inclusive) and 1 (exclusive). The random number generator is seeded from the current time, as in Java.

在 javascript 中数字尽可能随机。 Google more information and alternates如果你不相信我的话

为了演示 Math.random 的工作原理，我编辑了元素以允许任意数量的元素，由 numElems 设置。尝试几次，效果很好。 Demo here

编辑

我还建议使用 scrollHeight 和 scrollWidth 而不是使用 jQuery 的 width() 和 height() 因为它更具包容性，从而给出更准确的 top 值