web-dev-qa-db-ja.com

jQuery Masonryで無限スクロールを追加するにはどうすればよいですか？

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

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

scrollinfinite
13
user2210202

これを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>

ちなみにあなたのページは素晴らしく見えます

もっと疑問がある場合はここに行ってください 無限スクロールの石積み

23
Christian David

Infinite Scroll、私は自分のプロジェクトで一度試したことがあるので、これまでに使用したリファレンスのいくつかを次に示します。

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

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

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

http://jscroll.com/

それが役に立てば幸い。

5
Hiren Pandya