javascript - 在页面加载时随机定位 div

Question

我想要一组 div 在页面加载时随机定位。 div 当前设置为以随机方式在视口(viewport)中移动，但似乎都加载到左上角。

我目前的方法:( https://jsfiddle.net/j2PAb/634/ )

$(document).ready(function() {
    animateDiv($('.a'));
    animateDiv($('.b'));
    animateDiv($('.c'));});

function makeNewPosition($container) {

// Get viewport dimensions (remove the dimension of the div)
var h = $container.height() - 50;
var w = $container.width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh, nw];}


function animateDiv($target) {
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$target.animate({
    top: newq[0],
    left: newq[1]
}, speed, function() {
    animateDiv($target);
});

};

function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = .1;

var speed = Math.ceil(greatest / speedModifier);

return speed;}

Answer 1

只需定义它们的初始top 和left 位置，如this

div.a {
width: 50px;
height:50px;
 background-color:red;
position:fixed;
    top: 300px;
    left:10px;
}
div.b {
width: 50px;
height:50px;
 background-color:blue;
position:fixed;
    top: 100px;
    left:50px;
}
div.c {
width: 50px;
height:50px;
 background-color:green;
position:fixed;
    top: 150px;
    left:200px;

}