Question

我正在尝试使用isotope plugin向上和向下构建无限滚动。

但是我在stackoverflow上得到一些帮助之后再次陷入困境。不幸的是，内容只被克隆一次，但我的目的是每次用户到达页面的底部或顶部时克隆并附加/前置。

我是jQuery的新手，如果你能帮助我调试它，我将非常感激。

$(document).ready(function() {
    var $newElements = $(".isotope").first().children().clone();
    $(window).scroll(function() {
      if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
        $(".isotope").append( $newElements ).isotope( 'appended', $newElements );
        $isotope = $(".isotope").first().children().clone();
      }
      else if ( $(window).scrollTop() == 1 ) {
        $(".isotope").prepend( $newElements ).isotope('reloadItems').isotope({ sortBy: 'original-order' });
        $isotope = $(".isotope").first().children().clone();
      }    
      return false;
    });
});

Answer 1

听起来你正试图做infinite scroll。同位素插件可与无限滚动插件互操作，因此您不会遇到问题。以下是使用this页面的示例：

$(function(){

      var $container = $('#container');

      $container.isotope({
        itemSelector : '.element'
      });

      $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) ); 
        }
      );


 });

克隆内容，附加和预先添加

1 个答案: