Ajaxでデータを取得し、jQuery(Masonry,Infinite Scroll)を使いたい

まず、ページをロードした際にajaxでcgiからデータを取得し、jqueryのプラグインMasonryを使って画像やテキストをレンガ風に表示します。初期の表示処理は下記にアップしました。
https://gist.github.com/2917873 (表示用処理javascript)
https://gist.github.com/2917911 (念のためhtml)

この処理にInfinite Scrollプラグインを加えて、ブラウザのウィンドウを一番下までスクロールすると、ajaxでデータを取得し、また同じようにレンガ風に画像を表示するというコードを書きたいのですが、どのように書けばいいのでしょうか?

Masonryプラグインの公式tips http://masonry.desandro.com/demos/infinite-scroll.html

もしこのプラグインではajaxとスクロール処理を組み合わせた処理ができないのであれば、他の方法や参考になりそうなURLをご教示頂ければと存じます。
何卒よろしくお願いします。

参考記事:http://kachibito.net/web-design/masonry-infinite-scroll.html
この記事を読んでみたのですが、ajaxとInfinite Scroll組み合わせると、どのようなコードになるのか解らず困っています・・・

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/06/13 00:24:29
  • 終了:2012/06/13 17:54:14

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/06/13 02:43:06

ポイント200pt

display.cgiはGETを投げる度に追加すべき画像が入ったJSONを返してくれるのでしょうか?
Infinite Scrollプラグインは(たぶん)ページネーション(次のページ)のリンクを辿ってくれるもので、今回はそれがないのでこのプラグインは関係ないのでは。
普通にwindowのスクロールを監視してcgiを叩く以下のようなものを追加するとか。

$("#container").html('Now Loading...');
$.ajax({
省略
});
$(window).scroll(function () {
  //トリガ条件。適当。
  //http://www.atmarkit.co.jp/fdotnet/jqueryref/02attribute/attribute_13.html
  if ($('html, body').height() - $('html, body').scrollTop() < 1000) {
    //display.cgiをGETする$.ajax
    //successコールバックの$("#container").empty();をコメントアウトして"追加"するように改造する。
  }
});

TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」: 小粋空間
もしくはこのプラグインを使う。

id:chucker34

ありがとうございます。
それっぽい動きができました。
実はご教示頂いたbottomプラグインは一度試していたんですが、コードが間違っていて動かなかったようです。そのときはmasonryプラグインと併用すると干渉しあって動かないのかな?と勝手に思い込んでいました。masonry推奨のプラグインじゃないと動かないのかな?と・・・
bottomプラグインの方を見直したら動きました。

2012/06/13 17:53:58

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません