Thursday, March 21, 2013

jQuery Masonry Tips

jQuery Masonry : http://masonry.desandro.com/index.html

If call ajax and render each elements dynamically by javascrit, need to call 'appended' method. but sometimes the elements only to be shown on single column.
if need to show elements with multiple columns,
set width first
$("#div").masonry({columnWidth: 310});


 var box = renderSingleElement(item);
 var $singlebox = $(box);
 $("#div_single_element").append($singlebox).masonry( 'appended', $singlebox);

take note if set column width as 310, the width of single element should not be greater than 285, otherwise the elements still be in one column, not multiple columns, so take care to set the element width and column width.


2 comments:

  1. Nice to see this simple but good information on the other hand I'm interested also to the blog of Masonry in MD. Please keep on posting!

    ReplyDelete
  2. Great tips, do you have pictures about masonry? Thank you for the response.

    irrigation walnut creek ca

    ReplyDelete