Question

您可以使用此脚本在{ "_id": random.com, "name": "Random", }, { "_id": example.com, "name": "Example", }, { "_id": stack.com, "name": "Stack", }内传播img，而不会重叠。

结果很好但是太慢了。我怎样才能加速这个？

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

CSS

div

JS

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

}

HTML

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

加速将imgs放入div中而不重叠

1 个答案: