まず、ページをロードした際に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組み合わせると、どのようなコードになるのか解らず困っています・・・
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プラグイン」: 小粋空間
もしくはこのプラグインを使う。