Javascript 使用ajax和无限滚动无法工作

目前我正在使用AJAX从我们的Web服务中提取数据。我遇到的问题是，它不想将数据加载到砖石布局中，

.social_block

中的所有内容都在下一个下方浮动（我没有为这些设置任何浮动）。所以砖石工程不起作用：(

我希望发生以下情况：从Web服务加载砖石布局中的初始项，在“无限”滚动时，它将从Web服务发出分页请求，将新项附加到砖石布局中

因此，问题如下：
-为什么我的Web服务项目不使用砌体加载，而只加载到页面左侧？
-如何在现有AJAX请求中使用infinite scroll，以便它使用我现有的分页代码（第一个请求自动加载，第一个无限滚动上的第二个请求加载，第二个无限滚动上的第三个请求，等等）将新数据拉入砌体布局

作为补充说明，如果我在第

$container.imagesLoaded（function（）{

行之前添加

警报

而不是

控制台.log

，似乎会减慢速度，但随后会将初始请求加载到砖石格式-奇怪

<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>

“多装点！

$（函数（）{
var$container=$（“#container”）；
//警报（'如果我这样做，砖石将在尼斯布局中加载项目'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.block”，
列宽：100
});
});
$container.infinites卷({
navSelector:“#loadmore”，//分页导航的选择器
下一个选择器：“#更多”，//下一个链接的选择器（接收下一个结果）
itemSelector:'.block'，//所有要检索的项的选择器
装载：{
FinishedMg:“没有更多页面要加载。”，
img:'http://i.imgur.com/6RMhx.gif'
}
},
//触发器作为回调
函数（新元素）{
//在加载新项目时隐藏它们
var$newElems=$（newElements）.css（{opacity:0}）；
//确保在添加到砌体布局之前加载图像
$newElems.imagesLoaded（函数（）{
//显示元素现在他们准备好了
$newElems.animate（{opacity:1}）；
$container.mashing（'added'，$newElems，true）；
});
}
); 
//放在这里，以便够得着
var-page=0；
//这将使用新的json数据调用所需的url。
函数加载页（第页）{
var url='1〕http://example.com/“+第页；
$.getJSON（url、函数（数据）{
var cont=$（“#容器”）；
$.each（数据、数据、函数（索引、obj）{
变量项=对象消息；
继续追加(
$（“
”，{“类”：“块”}）。追加(
$（''，{“类”：item.Type}）.append(
$（''，{“类”：“post_image”}）。追加(
$('