我试图在使用Material Design Lite制作的模板中进行无限滚动。我在mdl-layout__container中有一些X卡的MDL卡，每行三张卡，加载页面时首先显示三行。因此，当我单击一个按钮时，应该向页面添加另外三行，每行三张卡，然后无需再次单击该按钮继续无限滚动下一行。这意味着只需单击一下即可在mdl-layout__container上启动无限滚动。
我的第一个想法是添加一个新的＆＃34;额外＆＃34;在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>
我尝试将下一行添加到＆＃34; extra＆＃34; DIV：
$("#view-source").click(function () {
$("#extra").append("New div rows");
});
答案 0 :(得分：0)
将新元素保持在与旧元素相同的水平可能更清晰。
您还可以包含每个＆＃34;页面＆＃34;在一个独特的div中，有自己的id 。这样您就可以引用该页面，以便在到达页面时更改浏览器地址。这可用于在使用无限滚动时获得更好的体验。