Adding jquery masonry

Question

Good evening,

I have a problem with Freemasonry.

This is my 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>'); } 

Behavior that I expect: Download the page, select the game from the second line of the search, click "send".
Start with 10 results, after scrolling populate more results.

But formatting is ubiquitous, and I know that you should use the imagesLoaded () plugin, but I do it.

In any case, here is the site in question:

http://newgameplus.nikuai.net/TEST/ (The first search bar does not work, so ignore this)

Any resolution would be greatly appreciated. Many thanks.

Answer 1

Try changing the width of the column in the same way as the image in the field:

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

Update line:

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

in

 $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 #container between them. I think you should only have one, and make sure $container extracted in $(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' ); } }); }); });