在页面加载时随机放置 div答案

【问题标题】：Randomly position divs upon page load在页面加载时随机放置 div
【发布时间】：2016-05-01 09:59:06
【问题描述】：

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

我目前的方法： (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;}

【问题讨论】：

这些是fixed 定位元素，您还没有在css 中定义它们的初始位置，因此它们的默认位置将是(0,0)
感谢您的快速回复。是的，我可以通过顶部、左侧、底部、右侧设置不同的起始位置，但是，我希望 div 在页面加载时从完全随机的位置开始。我在css中将定位更改为绝对，但没有成功。

标签： javascript jquery css position positioning

【解决方案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;

}

【讨论】：

【解决方案2】：

在为这些 div 设置动画之前，将随机值设置在这些 div 的顶部和左侧。

如下图……

function randomstart($target) {
    var newq = makeNewPosition($target.parent());
    $target.css({top:  newq[0], left: newq[1]});

};

检查updated fiddle。

【讨论】：

完美的瑞恩，谢谢！另一个随机问题，但您是否知道如何在这些 div 上创建一个 pacman 样式的效果，其中循环离开边缘并重新出现在另一侧？
我认为您应该检查 jquery animate 的 step 功能以获得此功能。您需要检查 div 的顶部和左侧，如果它们超出视口位置，请将其移动到对面的位置。检查以下链接中的步进功能。 api.jquery.com/animate/#step

【解决方案3】：

添加一个初始化方法来设置每个div的位置。

类似：

function initDiv(target) {
  var newq = makeNewPosition(target.parent());
  target.css({top:  newq[0], left: newq[1]});
  animateDiv(target.show());
}

最初也要隐藏 div，因此用户不会注意到移动：

div.a, div.b, div.c {
  display: none;
}

所以更新后的代码看起来像 (fiddle) ：

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


});

function initDiv(target) {
  var newq = makeNewPosition(target.parent());
  target.css({
    top: newq[0],
    left: newq[1]
  });
  animateDiv(target.show());
}

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;

}

div#container {
  height: 500px;
  width: 500px;
}
div.a,
div.b,
div.c {
  display: none;
}
div.a {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
}
div.b {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: fixed;
}
div.c {
  width: 50px;
  height: 50px;
  background-color: green;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class='a'></div>
  <div class='b'></div>
  <div class='c'></div>
</div>

【讨论】：