Question

参考。以上主题，我使用wookmark插件动态滚动我们的主页数据...。我已经研究了wookmark上提供的教程，我使用wookmark提供的确切脚本和工作不是100％工作的精细短片。当它到达窗口底部时它会停留的东西然后我们稍微按下向上箭头键，再次加载产品，这是随机发生的一段时间它完全滚动，有时它会卡住，如果按下箭头键，它会再次开始工作

请帮助我摆脱错误的地方。请为我提供简单易用的脚本。

我使用以下代码：

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

Answer 1

如果您注释掉

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

然后新项目将不会加载到列表的末尾。您需要取消注释该行以获取新项目。

在现实生活中而不是

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

您需要一个可以加载新项目的代码。

另外我认为改变＆gt;可能有意义。到＆gt; =

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

如果滚动位置更高或等于到窗口的高度 - 100，其中100只是一些值，则加载新项目 - 您可以尝试200甚至更多以查看它是否会更好用对你而言。

使用wookmark插件滚动无限滚动

1 个答案: