Question

我想用JavaScript生成随机div但不重叠。

但是当DIVS的数量变大时，浏览器将被阻止！

然后我使用Web Workers生成随机div，浏览器也会被阻止。

这是我的主要js代码：

self.onmessage = function(e){
    var itemslength = e.data;
    console.log(itemslength);
    var position = [];
    for(var i = 0 ; i < itemslength ; i++){
        var length = position.length;
        if(length == 0){
            x = 900*Math.random();
            y = 400*Math.random();
            var relxy = [x,y];
            position.push(relxy);
        }else{
            var flag = true;
            x = 900*Math.random();
            y = 400*Math.random();
            do{
                console.log('RUNNING!!');
                x = x + 50;
                y = y + 50;
                var relxy = [x,y];
                for(var j = 0 ; j < length ; j++){
                    var x1 = position[j][0];
                    var y1 = position[j][1];
                    var z = (x - x1)*(x - x1) + (y - y1)*(y - y1);
                    if(z > 10000){
                        flag = flag && true;
                    }else{
                        flag = flag && false;
                    }
                }
            }while(!flag);
            position.push(relxy);
        }
    }
    console.log('FINSHED!!');
    postMessage(position);
};

<script>
    var worker = new Worker('./js/bubbleworker.js');
    var itemslengh = $('.items').length;
    worker.postMessage(itemslengh);
    worker.onmessage = function(data){
        for(var i=0;i<data.data.length;i++){
            var x = data.data[i][0];
            var y = data.data[i][1];
            $('.items:eq(' + i + ')').css({
                'position':'absolute','left':x + 'px','top':y + 'px'
            })
        }

    }
</script>

我是对的吗？谁有更好的主意？谢谢！

如何生成随机div但不重叠

0 个答案: