jquery Wookmark插件无限加载/滚动

时间:2012-04-15 22:51:09

标签: jquery

我在我的网站上使用了Wookmark jQuery网格布局。

https://github.com/GBKS/Wookmark-jQuery

我需要自动加载/无限滚动工作。

在示例中,它只是再次加载前10个图像,如何让它继续加载Wookmark.com和Pinterest.com上的其余列表?

我一直试图改变的代码部分:

/**
 * 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 closeToBottom = ($(window).scrollTop() + $(window).height() > $(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 = $('#tiles li');
    var firstTen = items.slice(0, 10);
    $('#tiles').append(firstTen.clone());

    // Clear our previous layout handler.
    if(handler) handler.wookmarkClear();

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

提前致谢。我到处看了看,尝试了几件不同的东西,但没有运气。欢呼声。

1 个答案:

答案 0 :(得分:5)

我刚刚在GitHub存储库中添加了一个关于如何执行此操作的示例。该示例从Wookmark API加载数据并在页面上显示图像。当您向下滚动并到达底部时,它会加载更多。

以下是该示例的直接链接:https://github.com/GBKS/Wookmark-jQuery/tree/master/example-api

让我知道这对你有用。