masonry images coming out oddly.
===

This is not the issue regarding images coming out overlapping, but rather coming out of order. 

I've got an application that when you search a given game, returns a list of games similar.  The issue, is that when you search a game that hasn't be chached, it spits them out in weird order, if you do the search again immediately after, it spits them out in the right order. 

I have this bit of code (Which should be relevant):

    $container.imagesLoaded( function(){
    		$container.animate({ opacity:1});
    		$container.masonry({
    			itemSelector: '.box',
    			columnWidth: 1,
    			isAnimated: !Modernizr.csstransitions
    		});
    	});

    for ( var i=0; i < len; i++ ) {
    					item = balls();
    					items.push( item );	
    				}
    				var $items = $( items.join('') );
    				//Load up the initial boxes. 
    				$items.imagesLoaded(function(){
    				  $container
    					.append( $items ).masonry( 'appended', $items, true );
    				});

    function balls(){
    	$iterator -= 1;
    	if($iterator < 0){
    		var $boxes = $( '<div class="box">No more games!</div>' );
    		$container.append( $boxes ).masonry( 'appended', $boxes, false );   
    		return; 
    	}
    	return (
    		'<div class="box" style="width:18%">'
    		+'<p>'+$test[$iterator][1][2]['name']+'</p>'
    		+'<img src="scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300"/>' //Replace this with the one below when timthumb is whitelisted
    		+'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
    		+'</div>'
    	);
    }

If you do a console.log() on `items`, then you see they are in order, but again, they come out wrong. 

The website is here: http://newgameplus.nikuai.net/ 

You can see what its doing.  Sorry I didn't make a jsfiddle, it's pulling games from a database. 


If there's anything unclear, I'll do my best to make it so.  Thank you. 
