无限滚动wookmark插件滚动

随着ref。以上主题，我正在使用wookmark插件来动态滚动我们的主页数据...。我研究了wookmark上提供的教程，并且使用wookmark提供的确切脚本以及不能100％工作的精细短裤。当它到达窗口底部时，它会卡住，然后我们稍微按下向上箭头键，再次加载产品，这是随机发生的，它有时会完全滚动，有时它会发生抖动，如果按下箭头键，它会开始工作再次。无限滚动wookmark插件滚动

请帮助我，我哪里出错了。请为我提供简单的工作脚本。

我米使用下面的代码：

(function ($) { 
     $('#main').imagesLoaded(function() { 
      var handler = null; 

      // Prepare layout options. 
      var options = { 
       itemWidth: 200, // Optional min width of a grid item 
       autoResize: true, // This will auto-update the layout when the browser window is resized. 
       container: $('#main'), // Optional, used for some extra CSS styling 
       offset: 20, // Optional, the distance between grid items 
       outerOffset: 20, // Optional the distance from grid to parent 
       flexibleWidth: 300 // Optional, the maximum width of a grid item 
      }; 

      function applyLayout() { 
       $('#main').imagesLoaded(function() { 
        // Destroy the old handler 
        if (handler.wookmarkInstance) { 
         handler.wookmarkInstance.clear(); 
        } 

        // Create a new layout handler. 
        handler = $('#display li'); 
        handler.wookmark(options); 
       }); 
       handler.wookmark(options); 
      } 

      /** 
      * When scrolled all the way to the bottom, add more tiles. 
      */ 
      function onScroll(event) { 
       // Check if we're within 100 pixels of the bottom edge of the broser window. 
       var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix 
       //var closeToBottom = ($(window).scrollTop() >= $((document)).height() - $((window)).height() - $("#footer").height() - 500); //(($(window).scrollTop() - 100)); //+ "%" 
       var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100); 

       if (closeToBottom) { 
        // Get the first then items from the grid, clone them, and add them to the bottom of the grid. 
        var items = $('#display li'), 
        firstTen = items.slice(0, 10); 
        //$('#display').append(firstTen.clone()); 

        applyLayout(); 
       } 
      }; 

      // Capture scroll event. 
      $(window).bind('scroll', onScroll); 

      // Call the layout function. 
      handler = $('#display li'); 
      handler.wookmark(options); 
     }); 

     $(window).load(function() { 
      handler.wookmark(options); 
     }); 
    })(jQuery);

来源

2014-03-24 user3455505

如果您注释掉

//$('#display').append(firstTen.clone());

那么新项目将不会在列表的最后加载。您需要取消注释该行以获取新项目。

在现实生活中，而不是

var items = $('#display li'), 
firstTen = items.slice(0, 10); 
$('#display').append(firstTen.clone());

你需要将加载新的项目代码。

此外，我认为这可能是有意义的改变>为> =

var closeToBottom = ($(window).scrollTop() + winHeight >= $(document).height() - 100);

加载新的项目，如果滚动位置更或等于到窗口的高度 - 100，其中100只是一些价值 - 你可以尝试200甚至更多，看看它是否会为你更好地工作。

来源

2014-07-04 08:03:29 Alex

无限滚动wookmark插件滚动

回答

相关问题