mdl-layout__容器点击按钮无限滚动

Question

我正在尝试做一个无限滚动在我的模板与材料设计精简版。我在mdl-layout__container中有X个MDL卡，每行三张，加载页面时首先显示三行。因此，当我单击一个按钮时，应该向页面添加另外三行，每行三张卡片，然后不需要再次单击该按钮来继续无限滚动下一行。这意味着只需单击一下即可在mdl-layout__container上开始无限滚动。

我的第一个想法是在mdl-layout__content下面添加一个新的“额外”div来加载每个新行，但我不知道这是否是最好的方法。

这是我的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>

我尝试将下一行添加到"extra“div：

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

Answer 1

也许将新元素保持在与旧元素相同的级别会更干净。

你也可以用它自己的id把每个“页面”包含在一个唯一的div中。这样，您就有了对该页面的引用，因此当到达该页面时，浏览器地址可以更改。这可以用来在使用无限滚动时获得更好的体验。