javascript - 加快将图像放置在 div 内且不重叠的速度

Question

您使用此脚本在 div 内传播 img，没有任何重叠。

结果很好，但速度太慢。我怎样才能加速这个过程？

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

CSS

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

}

JS

$(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'
        });
    });
});

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>

Answer 1

您可以使用while(parameter--)来限制最大计算量。

$(document).ready(function() {
  var containerW = 700;
  var containerH = 600;
  var positions = [];
  $('.picture').each(function() {
    $(this).hide();
    var coords = {
      w: $(this).outerWidth(true),
      h: $(this).outerHeight(true)
    };
    var success = 100;
    while (success--) {
      coords.x = parseInt(Math.random() * (containerW - coords.w));
      coords.y = parseInt(Math.random() * (containerH - coords.h));
      var passed = 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
        ) {
          passed = false;
        }
      });
      if (passed) {
        console.log(success)
        break;
      }
    }
    positions.push(coords);
    $(this).css({
      top: coords.y + 'px',
      left: coords.x + 'px'
    });
    $(this).show();
  });
});

.gallery {
  position: relative;
  background: red;
  width: 700px;
  height: 600px;
}

.picture {
  border: 1px solid #000;
  margin: 5px 5px 5px 5px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>