克隆内容，附加和预处理

Cloning content, appending and prepending

本文关键字：预处理      更新时间：2023-09-26

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

但我在斯塔克弗流上得到一些帮助后，又陷入了困境。不幸的是，内容只被克隆一次，但我的意图是每当用户到达页面底部或顶部时，都会克隆并附加/预处理它。

我是jQuery的新手，如果你能帮我调试它，我将不胜感激

http://jsfiddle.net/sqJqr/7/

$(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;
    });
});

听起来像是在尝试进行无限滚动。同位素插件可以与无限滚动插件互操作，所以你应该不会有问题。下面是一个使用这两种方法的例子：

$(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 ) ); 
        }
      );

 });
相关文章：