2012-04-15 14 views
0

私のウェブサイトにWookmark jQueryグリッドレイアウトを使用しています。jquery Wookmark Plugin無限ロード/ Scoll

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

感謝。私はどこでも見て、いくつかの異なることを試しましたが、運はありません。乾杯。

答えて

5

ちょうどGitHubリポジトリにこれを行う方法の例を追加しました。この例では、Wookmark APIからデータをロードし、そのページにイメージを表示します。あなたが下にスクロールして底に達すると、より多くをロードします。

ここでは例への直接リンクです:https://github.com/GBKS/Wookmark-jQuery/tree/master/example-api

はこれがあなたのためにどのように動作するか私に教えてください。

+0

ありがとうございました!あなたの伝説!まさに私が何をしているか。今私はJSONP用のAPIを作成しようとしています! JSONPの初心者のための良いサイトですか? – Anthony1234

+0

JSONを取り除き、画像やコントロールなどを取得するためにPOSTを使用するように変更しました。もしあなたがInternet Explorer 8で動かないことに気づいたら、GBKSを疑問に思いますか?この問題がありましたか?最初の部分が読み込まれますが、スクロールでは何も動作しません。あなたは何らかの修正を知っていますか?ありがとう – Anthony1234