Question

目前我正在使用AJAX从我们的网络服务中提取数据。我遇到的问题是它不想将数据加载到砌体布局中，.social_block中的所有内容都会浮动下一个（我没有为这些设置浮点数）。所以砌体不起作用:(

我希望发生以下情况：从砌体布局中的webservice加载初始项目，在“无限”滚动中，它将使来自Web服务的分页请求将新项目附加到砌体布局中。

所以问题如下：
- 为什么我的网络服务项目不是使用砌体加载而只是加载到页面左侧？ - 如何使用我现有的AJAX请求使用无限滚动，以便使用我所使用的分页代码将新数据提取到砌体布局中（第一次请求加载http://example.com/，第二次请求加载http://example.com/1在第一个无限滚动，第二个无限滚动的第三个请求http://example.com/2等等）？

作为补充说明，如果我在行alert之前添加console.log而不是$container.imagesLoaded(function(){，它似乎会降低速度，但会将初始请求加载到砌体格式中 - 很奇怪！

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

砌体不使用ajax和无限滚动

0 个答案: