Блог

В настоящее время я использую AJAX для извлечения данных из нашего веб-сервиса. Проблема, с которой я сталкиваюсь, заключается в том, что он не хочет загружать данные в макет масонства, все, что находится в .social_block поплавках, остается под следующим (и я не установил для них никакого значения с плавающей точкой). Итак, кладка не работает : (

Я хотел, чтобы произошло следующее: загрузите исходные элементы из веб-сервиса в макет кладки, и при «бесконечной» прокрутке он отправит постраничный запрос от веб-сервиса для добавления новых элементов в макет кладки.

Итак, вопросы заключаются в следующем:
— Почему мои элементы веб-сервиса не загружаются с помощью masonry и просто загружаются слева от страницы?
— Как я могу использовать бесконечную прокрутку с моим существующим AJAX-запросом, чтобы он добавлял новые данные в макет кладки, используя код подкачки, который у меня есть, как (загрузка первого запроса http://example.com / автоматически загружается второй запрос http://example.com/1 при первом бесконечном прокручивании, третий запрос http://example.com/2 на второй бесконечной прокрутке и т.д.)?

В качестве дополнительного примечания, если я добавляю alert строку, а не console.log перед $container.imagesLoaded(function(){ , это, похоже, замедляет работу, но затем загружает первоначальный запрос в формат masonry — странно!

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