人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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組み合わせると、どのようなコードになるのか解らず困っています・・・

●質問者: Takapin
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●200ポイント ベストアンサー

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プラグイン」: 小粋空間
もしくはこのプラグインを使う。


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ