title: Speed up placing imgs inside a div without overlap
body: <p>U use this script for spreading <code>img</code>s inside <code>div</code>, without any overlapping.</p>
  
  <p>Result is good but it's too slow. How can I accelerate this?</p>
  
  <p>I mean, sometimes my browser is crashing because input positions of images are "bad".</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.gallery{
      position:relative;
      background: red;
      width: 700px;
      height: 600px;
  }
  .picture{
      border:1px solid #000;
      margin: 5px 5px 5px 5px;
      position:absolute;
  
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(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 &lt;= (this.x + this.w) &amp;&amp;
                      (coords.x + coords.w) &gt;= this.x &amp;&amp;
                      coords.y &lt;= (this.y + this.h) &amp;&amp;
                      (coords.y + coords.h) &gt;= this.y
                  ) {
                      success = false;
                  }
              });
          }
          positions.push(coords);
          $(this).css({
              top: coords.y + 'px',
              left: coords.x + 'px'
          });
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='gallery'&gt;
          &lt;div class='picture'&gt;&lt;img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/&gt;&lt;/div&gt;
          &lt;div class='picture'&gt;&lt;img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/&gt;&lt;/div&gt;
          &lt;div class='picture'&gt;&lt;img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/&gt;&lt;/div&gt;
          &lt;div class='picture'&gt;&lt;img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/&gt;&lt;/div&gt;
          &lt;div class='picture'&gt;&lt;img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/&gt;&lt;/div&gt;
          &lt;div class='picture'&gt;&lt;img src='http://lionssharedigital.com/wp-content/uploads/2013/08/apple-logo-small-150x150.jpg'/&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>