Masonry not working using ajax and infinite scroll

问题

Currently I'm using AJAX to pull in data from our webservice. The issue I'm having is that it doesn't want to load the data into the masonry layout, everything in .social_block floats left one under the next (and I haven't set any float for these). So masonry isn't working :(

I wanted the following to happen: Load initial items from webservice in the masonry layout and on "infinite" scroll it would make the paged request from the webservice to append new items into the masonry layout.

So the questions are as follows:
- Why aren't my webservice items loading using masonry and just loading to the left of page?
- How can I use infinite scroll with my existing AJAX request so it pulls in new data into the masonry layout using the paging code I have in place as (first request load http://example.com/ automatically, second request load http://example.com/1 on first infinite scroll, third request http://example.com/2 on second infinite scroll, etc.)?

As an added note, if I add in an alert rather than console.log before line $container.imagesLoaded(function(){ it seems to slow things down but then loads the initial request into 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 the nice layout if I do this');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.block',
        columnWidth: 100
      });
    });

    $container.infinitescroll({
      navSelector  : '#loadmore',    // selector for the paged navigation 
      nextSelector : '#more',  // selector for the NEXT link (to receive next results)
      itemSelector : '.block',     // selector for all items to retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    ); 


    // set here so it is in reach
    var page = 0;

    // this will call the required url with 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 with page empty
      loadPage('');

  });
</script>

来源：https://stackoverflow.com/questions/24398870/masonry-not-working-using-ajax-and-infinite-scroll