jquery masonry image append

Good evening,

I'm having an issue with Masonry.

This is all my relevant 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: 1,
        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<10; i++){
                    var $boxes = $(balls($iterator));
                    $container.append( $boxes ).imagesLoaded( function(){$container.masonry( 'appended', $boxes);});            
                }
                var $boxes = $( '<div class="box" STYLE="color: rgba(255, 255, 255, 1);">These results are ranked from<BR> most similar, to least similar.<BR>The percentage below each game <BR>indicates how similar to the <BR>original input that game is.<BR></div>' );
                $container.prepend( $boxes ).masonry( 'reload' );       
            }
        });
    });
});


window.onscroll = scroll;

function scroll() {  
    var $boxes = $(balls($iterator));
    $container.append( $boxes ).imagesLoaded( function(){$container.masonry( 'appended', $boxes, true);});
}  
//+'<img src="timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300"/>' Replace this with the one below when timthumb is whitelisted
function balls($i){
    $iterator -= 1;
    var $width = 7.5;
    return ('<div class="box">'
    +''+$test[$iterator][1][2]+''
    +'<img src="'+$test[$iterator][2]+'"  width="280" height="160"/>'
    +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
    +'</div>');
}

The behaviour I expect: Load page, select game from second search bar, hit 'submit'.
Populate with 10 results, upon scrolling, populate with more results.

But the formatting is all over the place, and I know you're supposed to use the imagesLoaded() plugin, but I do.

Anyway, here is the site in question:

http://newgameplus.nikuai.net/TEST/ (First search bar doesn't work btw, so ignore that)

Any resolution would be greatly appreciated. Thanks so very much.

Try changing your columnWidth to the same as the image in the box:

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

Update the line:

$container.append( $boxes ).imagesLoaded( function(){$container.masonry( 'appended', $boxes);});

to:

$container.append( $boxes ).masonry('appended', $boxes);

I also think you should revise your $(document).ready sections. You currently have 2 of them and the #container element is retrieved between the two. I think you should only have the one and make sure the $container is fetched in the $(document).ready.

Updated 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
        });
    });

    $("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<10; i++){
                    var $boxes = $(balls($iterator));
                    $container.append( $boxes ).masonry('appended', $boxes);            
                }
                var $boxes = $( '<div class="box" STYLE="color: rgba(255, 255, 255, 1);">These results are ranked from<BR> most similar, to least similar.<BR>The percentage below each game <BR>indicates how similar to the <BR>original input that game is.<BR></div>' );
                $container.prepend( $boxes ).masonry( 'reload' );       
            }
        });
    });
});