jquery masonry image append

Question

Good evening,

I\'m having an issue with Masonry.

This is all my relevant code:

var $test;
var $iterator = 0; 
$(document).ready(function         


        

Answer 1

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 = $( '
These results are ranked from
 most similar, to least similar.
The percentage below each game 
indicates how similar to the 
original input that game is.
' );
                $container.prepend( $boxes ).masonry( 'reload' );       
            }
        });
    });
});