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

Question

我想用 Javascript / jQuery 在页面上随机放置一个类的几个元素。我的想法是为 margin-top、margin-left 和 z-index 生成随机值。问题是我需要生成介于负数和正数之间的值（例如从 -150 像素到 300 像素），我不明白如何使用我使用的代码来制作它：

$(".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. fiddle bee 中的元素有点奇怪，就像它们的位置并不是真正随机的，或者它们相互连接......

更新：

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

返回 [0,1) 范围内的伪随机数 — 即 0 之间 （含）和 1（不含）。随机数生成器已播种 从当前时间开始，就像在 Java 中一样。

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

为了演示Math.random 的工作情况，我编辑了项目以允许任意数量的元素，由numElems 设置。多试几次，效果还不错。 Demo here

编辑

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