javascript - Masonry not working using ajax and infinite scroll -

javascript - Masonry not working using ajax and infinite scroll -

currently i'm using ajax pull in info our webservice. issue i'm having doesn't want load info masonry layout, in .social_block floats left 1 under next (and haven't set float these). masonry isn't working :(

i wanted next happen: load initial items webservice in masonry layout , on "infinite" scroll create paged request webservice append new items masonry layout.

so questions follows: - why aren't webservice items loading using masonry , loading left of page? - how can utilize infinite scroll existing ajax request pulls in new info masonry layout using paging code have in place (first request load http://example.com/ automatically, sec request load http://example.com/1 on first infinite scroll, 3rd request http://example.com/2 on sec infinite scroll, etc.)?

as added note, if add together in alert rather console.log before line $container.imagesloaded(function(){ seems slow things downwards loads initial request masonry format - weird!

<div id="container"> </div> <p id="loadmore"> <button id="more">'load more!</button> </p> <script src="js/vendors/jquery/jquery-1.10.0.min.js"></script> <script src="js/vendors/masonry/jquery.masonry.min.js"></script> <script src="js/vendors/jquery/jquery.infinitescroll.min.js"></script> <script> $(function(){ var $container = $('#container'); //alert('masonry loads items in nice layout if this'); $container.imagesloaded(function(){ $container.masonry({ itemselector: '.block', columnwidth: 100 }); }); $container.infinitescroll({ navselector : '#loadmore', // selector paged navigation nextselector : '#more', // selector next link (to receive next results) itemselector : '.block', // selector items retrieve loading: { finishedmsg: 'no more pages load.', img: 'http://i.imgur.com/6rmhx.gif' } }, // trigger masonry callback function( newelements ) { // hide new items while loading var $newelems = $( newelements ).css({ opacity: 0 }); // ensure images load before adding masonry layout $newelems.imagesloaded(function(){ // show elems they're ready $newelems.animate({ opacity: 1 }); $container.masonry( 'appended', $newelems, true ); }); } ); // set here in reach var page = 0; // phone call required url new json data. function loadpage(page) { var url = 'http://example.com/' + page; $.getjson(url, function(data) { var cont = $('#container'); $.each(data.data, function(index, obj) { var item = obj.message; cont.append( $('<li>', {"class": "block"}).append( $('<span>', {"class": item.type}).append( $('<span>', {"class":"post_image"}).append( $('<img>', {src:item.postimagelarge}) ) ) ) ) ) }); //$.each(data.data, function(key, val) { console.log('data key: ', key, ', value: ', val)}); }); } // load more handler $('#more').click(function(){ page = page + 1; loadpage(page); //load more items }); // initial run page empty loadpage(''); }); </script>

javascript jquery ajax jquery-masonry