Javascript 加快将IMG放置在div内而不重叠

U使用此脚本在

div

内传播

img

s，无任何重叠

结果不错，但速度太慢了。我怎样才能加快速度

我的意思是，有时我的浏览器会崩溃，因为图像的输入位置“不好”

CSS

.gallery{
    position:relative;
    background: red;
    width: 700px;
    height: 600px;
}
.picture{
    border:1px solid #000;
    margin: 5px 5px 5px 5px;
    position:absolute;

}

$(document).ready(function() {
  var containerW = 700;
    var containerH = 600;
    var positions = [];
    $('.picture').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'
        });
    });
});

JS

.gallery{
    position:relative;
    background: red;
    width: 700px;
    height: 600px;
}
.picture{
    border:1px solid #000;
    margin: 5px 5px 5px 5px;
    position:absolute;

}

$(document).ready(function() {
  var containerW = 700;
    var containerH = 600;
    var positions = [];
    $('.picture').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'
        });
    });
});

$（文档）.ready（函数（）{
var-containerW=700；
var-containerH=600；
var头寸=[]；
$（'.picture'）。每个（函数（）{
变量坐标={
w:$（此）.外径（真），
h:$（此）.outerHeight（真）
};
var成功=false；
而（！成功）{
coords.x=parseInt（Math.random（）*（containerW-coords.w））；
coords.y=parseInt（Math.random（）*（containerH-coords.h））；
var成功=真；
$.each（位置、功能（）{
如果(
coords.x=这个.x&&
coords.y=这个.y
) {
成功=错误；
}
});
}
位置。推（协调）；
$（this.css）({
顶部：coords.y+‘px’，
左：coords.x+‘px’
});
});
});

HTML

<div class='container'>
    <div class='gallery'>
        <div class='picture'><img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/></div>
        <div class='picture'><img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/></div>
        <div class='picture'><img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/></div>
        <div class='picture'><img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/></div>
        <div class='picture'><img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/></div>
        <div class='picture'><img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/></div>
    </div>
</div>

您可以使用

while（参数--）

来限制最大的计算量

$（文档）.ready（函数（）{
var-containerW=700；
var-containerH=600；
var头寸=[]；
$（'.picture'）。每个（函数（）{
$（this.hide（）；
变量坐标={
w:$（此）.外径（真），
h:$（此）.outerHeight（真）
};
var成功率=100；
而(成功--){
coords.x=parseInt（Math.random（）*（containerW-coords.w））；
coords.y=parseInt（Math.random（）*（containerH-coords.h））；
var通过=真；
$.each（位置、功能（）{
如果(
coords.x=这个.x&&
coords.y=这个.y
) {
通过=错误；
}
});
如果（通过）{
console.log（成功）
打破
}
}
位置。推（协调）；
$（this.css）({
顶部：coords.y+‘px’，
左：coords.x+‘px’
});
$（this.show（）；
});
});
.gallery{
位置：相对位置；
背景：红色；
宽度：700px；
高度：600px；
}
.图片{
边框：1px实心#000；
保证金：5px 5px 5px 5px；
位置：绝对位置；
}

您可以使用
while（参数--）
来限制最大的计算量


$（文档）.ready（函数（）{
var-containerW=700；
var-containerH=600；
var头寸=[]；
$（'.picture'）。每个（函数（）{
$（this.hide（）；
变量坐标={
w:$（此）.外径（真），
h:$（此）.outerHeight（真）
};
var成功率=100；
而(成功--){
coords.x=parseInt（Math.random（）*（containerW-coords.w））；
coords.y=parseInt（Math.random（）*（containerH-coords.h））；
var通过=真；
$.each（位置、功能（）{
如果(
coords.x=这个.x&&
coords.y=这个.y
) {
通过=错误；
}
});
如果（通过）{
console.log（成功）
打破
}
}
位置。推（协调）；
$（this.css）({
顶部：coords.y+‘px’，
左：coords.x+‘px’
});
$（this.show（）；
});
});
.gallery{
位置：相对位置；
背景：红色；
宽度：700px；
高度：600px；
}
.图片{
边框：1px实心#000；
保证金：5px 5px 5px 5px；
位置：绝对位置；
}

将脚本置于头部之外tag@Azola这没有任何帮助。你想达到什么目的？更快地传播图像，没有重叠，没有噪音lags@JJJ把剧本放在头外tag@Azola那没有任何帮助。你想实现什么？更快地传播图像，没有重叠，没有lags@JJJ仅供参考：此解决方案在随机时间创建重叠。仅供参考：此解决方案在随机时间创建重叠。