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

Question

我想用Javascript/jQuery在页面上随机放置一个类的几个元素。我的想法是为margin-top，margin-left和z-index生成随机值。问题是，我需要在这两者之间产生值阴性和阳性（如从-150px至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至300像素。

2. 在小提琴元素beave有点怪，像他们的立场是不是真正随机的或者像他们相互连接...

更新：

制造它的工作，但仍然不喜欢的结果，我实际上希望元素随机放置，所以他们会适合页面大小，我的意思是元素将被放置在整个页面上，不会太远离上边缘页。现在我有一个固定在页面中心的父元素（具有宽度和高度= 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中尽可能随机。 Googlemore information​​alternates，如果你不相信我

为了演示如何Math.random的作品，我编辑的项目，以允许任意数量的元素，通过numElems设置。尝试几次，它工作得很好。Demo here

编辑

我也建议使用scrollHeight和scrollWidth相对于使用jQuery的width()和height()，因为它更具有包容性，从而给出更精确的top值