JS/Jquery div的随机位置答案

【问题标题】：JS/Jquery Random Position of divsJS/Jquery div的随机位置
【发布时间】：2016-04-09 14:41:18
【问题描述】：

以前有人问过这个问题，我的代码正在运行。

问题在于脚本似乎冻结了一些奇怪的视口大小。除了关闭标签，您无能为力。

我尝试编写一些备份脚本，如果它被冻结会终止循环，但它似乎没有完成工作。

谁能告诉我怎么了？或者在脚本中显示导致冻结的一般错误？

这是代码运行的站点： http://unkn0wn3d.com

JS 代码在那里： http://unkn0wn3d.com/css/pos.js

或这里：

var pos = function(){
var containerW = $("article").width();
var containerH = $("article").height();
var langH = parseInt($( ".languages" ).position().top + $( ".languages" ).height());
var langW = parseInt($( ".languages" ).position().left + $( ".languages" ).width());
var creditW = parseInt($( ".credit" ).position().left - $(".link:first").width() + 15);
var positions = [];
var froze = false;
setTimeout(function(){froze=true;}, 2000)
$('.link').each(function() {
    var coords = {
        w: $(this).outerWidth(true)+5,
        h: $(this).outerHeight(true)+5
    };
    var success = false;
    while (!success)
    {
        coords.x = parseInt(Math.random() * (containerW-coords.w));
        coords.y = parseInt(Math.random() * (containerH-coords.h));
        var success = true;
        $.each(positions, function(){
            if (froze){return false;}
            if (
                (coords.x <= langW &&
                coords.y <= langH) ||
                (coords.x >= creditW &&
                coords.y <= langH) ||
                (coords.x <= (this.x + this.w) &&
                (coords.x + coords.w) >= this.x &&
                coords.y <= (this.y + this.h) &&
                (coords.y + coords.h) >= this.y)
            )
            {
                success = false;
            }
        });
    }
    positions.push(coords);
    $(this).css({
        top: coords.y + 'px',
        left: coords.x + 'px',
        display: 'block'
    });
})};

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

$(document).ready(
    pos()
);
$(window).resize(function () {
    waitForFinalEvent(function(){pos();}, 500, "resize");
});

【问题讨论】：

标签： javascript jquery html css random

【解决方案1】：

你有两个问题。我看不到你在哪里做，但你的 A.link 元素的大小仅由视口的高度控制。因此，如果视口又高又窄，那么链接就很大，根本不可能把它们都放好。

第二个问题是，如果无法放置链接，您的代码就会一直尝试下去。计时器永远不会触发，因为主脚本仍在忙于运行。而不是仅仅做

while (!success)

最好进行有限次数的尝试：

var success = false;
for (var attempt = 0; !success && attempt < 50; attempt++)
{
     ....
}

通过限制尝试次数，即使链接重叠，它也会停止冻结。然后你可以删除冻结和计时器。更好的做法是在尝试次数增加时引入容差 - 因此允许它们有一点重叠。

【讨论】：

太好了！ postit 的大小由 vmin 控制，以确保纵向设备不会获得巨大的 postit。如果您创建一个又细又高的视口，您会注意到 postits 不会变大。

【解决方案2】：

你的 while 循环永远不会终止，因为你在里面写了var success = true 您再次使用 var 重新定义了 success 变量，所以现在您有 2 个 success 实例，而第一个实例永远不会设置为 true，因此循环永远不会终止。尝试从var success = true 中删除var

【讨论】：