13

jQuery Masonry の一種を使用している現在の Web サイトに無限スクロールを組み込もうとしています。javascript (および一般的な html) の言語と基本機能を理解しようとしていますが、かなり圧倒される可能性があります。また、PHP の使用など、Web ページに無限スクロールを追加するさまざまな方法も見ています。基本的に、どの方法が自分のサイトに最適かという方向感覚がありません。ヒントやヘルプは大歓迎です。そして、このトピックに関する知識が不足していることをお詫びしますが、これはかなり頭がおかしいと感じています... @_@

これが私のウェブサイトです。これは私の個人的なアートワーク コレクションです: http://themptyrm.com

4

2 に答える 2

23

これをhtmlファイルに追加します

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script src="../js/jquery.infinitescroll.min.js"></script>

これを追加すると、ここで無限スクロールオプションを指定できます

<script type="text/javascript">
var $container = $('#container');
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    var $newElems = $( newElements );
    $container.masonry( 'appended', $newElems );
  }
);
</script>

ちなみに、あなたのページは見栄えがします

さらに疑問がある場合は、ここにアクセスしてください無限スクロールの石積み

于 2013-03-28T19:09:18.347 に答える
5

無限スクロール、私は自分のプロジェクトで一度試したので、これまでに使用した参照の一部を以下に示します..

https://github.com/paulirish/infinite-scroll

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

jScroll は、Philip Klauzinski によって書かれた無限スクロール用の jQuery プラグインです。無限スクロール; 遅延読み込み、エンドレス スクロール、オートページャー、エンドレス ページなどとも呼ばれます。下にスクロールすると、現在のページまたはコンテンツ領域内に AJAX を介してコンテンツをロードする機能です。新しいコンテンツは、既存のコンテンツの最後までスクロールするたびに自動的にロードするか、既存のコンテンツの最後にあるナビゲーション リンクをクリックしてロードをトリガーすることができます。

http://jscroll.com/

それが役に立てば幸い。

于 2013-03-26T05:38:06.227 に答える