title: jquery masonry appending images with custom sizes.
body: <p>Evening!  </p>
  
  <p>My current relevant code: 
           </p>
  
  <pre><code>var $test;
  var $iterator = 0; 
  $(document).ready(function() {
      $("#demo-input").tokenInput("php-example.php" ,{
          classes: {
              tokenList: "token-input-list-facebook",
              token: "token-input-token-facebook",
              tokenDelete: "token-input-delete-token-facebook",
              selectedToken: "token-input-selected-token-facebook",
              highlightedToken: "token-input-highlighted-token-facebook",
              dropdown: "token-input-dropdown-facebook",
              dropdownItem: "token-input-dropdown-item-facebook",
              dropdownItem2: "token-input-dropdown-item2-facebook",
              selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
              inputToken: "token-input-input-token-facebook"
          },
          hintText: "Type in the names of your Tags",
          noResultsText: "No results",
          searchingText: "Searching..."
      });
  });
  
  var $container = $('#container');
  
  $container.imagesLoaded( function(){
      $container.masonry({
          itemSelector: '.box',
          columnWidth: 280,
          isAnimated: !Modernizr.csstransitions
      });
  });
  
  $(document).ready(function() {
      $("input[type=button]").click(function () {
          $.ajax({ url: "generatehtml.php",
          data: {action: $(this).siblings("input[type=text]").val()},
          type: 'post',
          dataType: "json",
          success: 
              function(response){
                  $test=response;
                  $iterator =  $test.length;                  
                  for (i=0; i&lt;10; i++){
                      var $boxes = $(balls($iterator));
                      $container.append( $boxes ).masonry('appended', $boxes);                        
                  }
  
                  var $boxes = $( '&lt;div class="box" STYLE="color: rgba(255, 255, 255, 1);"&gt;These results are ranked from&lt;BR&gt; most similar, to least similar.&lt;BR&gt;The percentage below each game &lt;BR&gt;indicates how similar to the &lt;BR&gt;original input that game is.&lt;BR&gt;&lt;/div&gt;' );
                  $container.prepend( $boxes ).masonry('reload', $boxes); 
              }
          });
      });
  });
  
  
  window.onscroll = scroll;
  
  function scroll(){  
      var $boxes = $(balls($iterator));
      $container.append( $boxes ).masonry('appended', $boxes);    
      }  
  //+'&lt;img src="timthumb.php?src='+$test[$iterator][2]+'&amp;q=100&amp;w=300"/&gt;' Replace this with the one below when timthumb is whitelisted
  function balls($i){
      $iterator -= 1;
      var $width = 7.5;
      return ('&lt;div class="box"&gt;'
      +''+$test[$iterator][1][2]+''
      +'&lt;img src="'+$test[$iterator][2]+'"  width="280" height="160"/&gt;'
      +'&lt;div id=boxBottom&gt;'+Math.floor($test[$iterator][0]*100)+'%&lt;/div&gt;'
      +'&lt;/div&gt;');
  }
  </code></pre>
  
  <p></p>
  
  <p>As you can see in: </p>
  
  <pre><code> $container.imagesLoaded( function(){
   $container.masonry({
      itemSelector: '.box',
      columnWidth: 280,
      isAnimated: !Modernizr.csstransitions
   });
   });
  </code></pre>
  
  <p>And</p>
  
  <pre><code> +'img src="'+$test[$iterator][2]+'"  width="280" height="160"/&gt;'
  </code></pre>
  
  <p>That the image size is being forced into 280x160, I'd like these images to be a bit more dynamic, and I'd also like there to be little space between each box, how can I do this? </p>
  
  <p>Site for reference: </p>
  
  <p><a href="http://newgameplus.nikuai.net/TEST/" rel="nofollow">http://newgameplus.nikuai.net/TEST/</a></p>
  
  <p>(Don't use first search bar.)</p>