javascript - 单击按钮时 mdl-layout__container 无限滚动

Question

我正在尝试在使用 Material Design Lite 制作的模板中进行无限滚动。我在 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>

我尝试将下一行添加到“额外”div:

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

Answer 1

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

您还可以将每个“页面”包含在一个具有自己 ID 的唯一 div 中。这样您就可以引用该页面，以便在到达该页面时可以更改浏览器地址。这可用于在使用无限滚动时获得更好的体验。