mdl-layout__containerボタンをクリックすると無限のスクロール

Question

Material Design Liteで作成したテンプレートで無限のスクロールをしようとしています。 mdl-layout__containerの中にX個のMDLカードがあります.1行に3枚、最初にページが読み込まれたときに3行表示されています。したがって、ボタンをクリックすると、1行に3枚のカードを追加して3つの行をページに追加し、次の行の無限スクロールを続行するためにボタンを再度クリックする必要はありません。これは、mdl-layout__containerの無限スクロールを開始する1回のクリックを意味します。

私の最初の考えは、すべての新しい行を読み込むために新しい "余分な" divをmdl-layout__contentの下に追加することでしたが、これを行う最良の方法はわかりません。ここで

は、3x3のグリッドと私のメインクラスです：

<main class="mdl-layout__content mdl-color--grey-100"> 
    <div class="mdl-grid walla-content"> 
    <!-- START Bucle to load every card, hand made by now --> 
     <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="1"> 
     <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop"> 
     <figure class="mdl-card__media"> 
      <img src="images/chairs.jpg" alt="" /> 
     </figure> 
      <div class="mdl-card__title mdl-card--expand mdl-color--teal-300"> 
      <h2 class="mdl-card__title-text">Article 1</h2> 
      </div> 
      <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 
      Little description 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
      <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a> 
      </div> 
     </div> 
     <div class="walla-separator mdl-cell--1-col"></div> 

     </div> 
    <!-- Bucle to load every card, handmade by now END --> 
     <!-- Delete when proof concept finishes --> 
     <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="2"> 
     <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop"> 
     <figure class="mdl-card__media"> 
      <img src="images/chairs.jpg" alt="" /> 
     </figure> 
      <div class="mdl-card__title mdl-card--expand mdl-color--teal-300"> 
      <h2 class="mdl-card__title-text">Article 1</h2> 
      </div> 
      <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 
      Little description 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
      <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a> 
      </div> 
     </div> 
     <div class="walla-separator mdl-cell--1-col"></div> 
     </div> 

     <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="3"> 
     <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop"> 
     <figure class="mdl-card__media"> 
      <img src="images/chairs.jpg" alt="" /> 
     </figure> 
      <div class="mdl-card__title mdl-card--expand mdl-color--teal-300"> 
      <h2 class="mdl-card__title-text">Article 1</h2> 
      </div> 
      <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 
      Little description 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
      <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a> 
      </div> 
     </div> 
     <div class="walla-separator mdl-cell--1-col"></div> 
     </div> 

     <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="4"> 
     <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop"> 
     <figure class="mdl-card__media"> 
      <img src="images/chairs.jpg" alt="" /> 
     </figure> 
      <div class="mdl-card__title mdl-card--expand mdl-color--teal-300"> 
      <h2 class="mdl-card__title-text">Article 1</h2> 
      </div> 
      <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 
      Little description 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
      <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a> 
      </div> 
     </div> 
     <div class="walla-separator mdl-cell--1-col"></div> 
     </div> 

     <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="5"> 
     <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop"> 
     <figure class="mdl-card__media"> 
      <img src="images/chairs.jpg" alt="" /> 
     </figure> 
      <div class="mdl-card__title mdl-card--expand mdl-color--teal-300"> 
      <h2 class="mdl-card__title-text">Article 1</h2> 
      </div> 
      <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 
      Little description 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
      <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a> 
      </div> 
     </div> 
     <div class="walla-separator mdl-cell--1-col"></div> 
     </div> 

     <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="6"> 
     <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop"> 
     <figure class="mdl-card__media"> 
      <img src="images/chairs.jpg" alt="" /> 
     </figure> 
      <div class="mdl-card__title mdl-card--expand mdl-color--teal-300"> 
      <h2 class="mdl-card__title-text">Article 1</h2> 
      </div> 
      <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 
      Little description 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
      <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a> 
      </div> 
     </div> 
     <div class="walla-separator mdl-cell--1-col"></div> 
     </div> 

     <div id="extra"></div> 


    </div> 
    </main> 

<a href="#" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">Load More button</a> 

そして「余分」のdivに次の行を追加する私の試み：

$("#view-source").click(function() { 
    $("#extra").append("New div rows"); 
}); 

Answer 1

は、おそらく新しい要素を維持するクリーナーです古いものと同じレベルです。

また、には、それぞれの「ページ」を固有のIDでという固有のdivに含めることもできます。この方法でページへの参照があるので、ページに達するとブラウザアドレスが変更される可能性があります。これは、無限スクロールを使用するとより良いエクスペリエンスを実現するために使用できます。