まず、ページをロードした際に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組み合わせると、どのようなコードになるのか解らず困っています・・・
No.1
1504
493
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プラグイン」: 小粋空間
もしくはこのプラグインを使う。
8
8
1
4
2
ありがとうございます。
2012/06/13 17:53:58それっぽい動きができました。
実はご教示頂いたbottomプラグインは一度試していたんですが、コードが間違っていて動かなかったようです。そのときはmasonryプラグインと併用すると干渉しあって動かないのかな？と勝手に思い込んでいました。masonry推奨のプラグインじゃないと動かないのかな？と・・・
bottomプラグインの方を見直したら動きました。