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

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

如果您希望元素在整个屏幕上随机放置而不重叠边缘，您可以使用以下内容：Demo（我也清理了一下）

至于#2，在编码方面没有真正的随机性。大多数随机数，如Math.random来自时间。来自 Mozilla：

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

javascript 中的数字尽可能随机。如果您不相信我，请谷歌 更多信息 和 替代方案

为了演示效果如何Math.random，我编辑了项目以允许任意数量的元素，由numElems. 多试几次，效果还不错。演示在这里

编辑

我还建议使用scrollHeightandscrollWidth而不是使用 jQuery 的width()，height()因为它更具包容性，从而提供更准确的top值