бесконечная прокрутка путевых точек с проблемой каменной кладки с быстрой прокруткой

У меня есть бесконечная прокрутка, работающая с каменной кладкой, используя приведенный ниже код, но если я прокручиваю быстро, новый контент не загружается, если я не прокручиваю немного назад, а затем снова вниз.

Если я прокручиваю медленно, это работает нормально.

Я использую в основном значения по умолчанию для ярлыка бесконечной прокрутки путевых точек, а данные загружаются из php по ссылке «Дополнительно». Файл php отображает 12 элементов при каждом вызове, за которыми следует новая ссылка «Дополнительно» [если нет больше данных].

<script>
$( document ).ready(function() {

var container = $('.infinite-container');

// initialize Masonry after all images have loaded  
container.imagesLoaded( function() {
    container.masonry({
         itemSelector: '.infinite-item',
         transitionDuration: 0
    });
}); 

    $('.infinite-container').waypoint('infinite', {

    onAfterPageLoad: function() {
        $(container).masonry('reloadItems');
        $(container).imagesLoaded( function() {
          $(container).masonry('layout');
          });
    }
}); 

}); 
</script>

jquery infinite-scroll masonry
person twiddly    schedule 08.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хотя на самом деле это не решение проблемы с путевыми точками, это является решением.

Я переключился на использование плагина бесконечной прокрутки, и теперь он работает. https://github.com/paulirish/infinite-scroll

Требовалось очень мало изменений в существующем коде, обернутая ссылка «больше» текущих путевых точек в div page-nav

Вот новый код, вдруг кому поможет.

$( document ).ready(function() {

    var $container = $('.infinite-container');
    // initialize Masonry after all images have loaded  
    $container.imagesLoaded( function() {
      $container.masonry({
             itemSelector: '.infinite-item',
             transitionDuration: 0,
             "isFitWidth": true
             //columnWidth: 200
        });
    }); 

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.infinite-item',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          msgText: '<em>loading...</em>',
          img: 'images/loading.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 ); 
        });
      }
    );

});
person twiddly    schedule 10.12.2014