Question

尝试在其容器内随机定位气球而不重叠。我认为我的定位是正确的，但是当我推动位置变量时会发生无限循环。我看不出它出了什么问题。气球通过append（）动态添加到DOM，并放置在窗口加载函数中，因此它应该可以工作。

代码是：

jQuery(window).load(function() {
    // Balloon positioning
    var containerW = 800;
    var containerH = 500;
    var positions = [];
    $('.balloony').each(function() {
        var coords = {
            w: $(this).outerWidth(true),
            h: $(this).outerHeight(true)
        };
        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 (
                    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'
        });
    });
});

小提琴是：https://jsfiddle.net/g91rdq69/ （启用positions.push会导致小提琴崩溃）

谢谢！

Answer 1

您已在循环内重新定义变量成功，因此更改了其范围。因此，破坏循环的外部范围的成功不会改变，从而导致无限循环。

因此改变var success = true;内部循环到成功= true;

jQuery(window).load(function() {
    // Balloon positioning
    var containerW = 800;
    var containerH = 500;
    var positions = [];
    $('.balloony').each(function() {
        var coords = {
            w: $(this).outerWidth(true),
            h: $(this).outerHeight(true)
        };
        var success = false;
        while (!success)
        {
            coords.x = parseInt(Math.random() * (containerW-coords.w));
            coords.y = parseInt(Math.random() * (containerH-coords.h));
            success = true;
            $.each(positions, function(){
                if (
                    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'
        });
    });
});

Answer 2

问题在于：你的气球不适合容器

.balloony {
      background-color: red;
      width: 30px;/*110px;*/ /*here*/
      height: 70px;
      ...

我也在JS中做了很少的改动。

jQuery(document).ready(function() {
        // Balloon positioning
        var containerW = 800;
        var containerH = 500;
        var positions = [];
        $('.balloony').each(function() {
            var coords = {
                w: $(this).outerWidth(true),
                h: $(this).outerHeight(true)
            };
            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(){
                //console.log(this);
                    if (
                        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;
                        return false; //break .each if found
                    }
                });
            }
             positions.push(coords);
            $(this).css({
                top: coords.y + 'px',
                left: coords.x + 'px'
            });
        });
        });//added

jQuery随机定位无限循环问题

2 个答案: