I'm trying to do an infinite scrolling in my template made with Material Design Lite. I've got an X number of MDL cards inside mdl-layout__container, three cards per row, three rows shown at first when the page is loaded. So when I click a button, then three more rows with three cards per row should be added to the page and then no need to click again the button to continue with the infinite scrolling for the next rows. It means just one click to start the infinite scrolling on mdl-layout__container.
My first thought was to add a new "extra" div below the mdl-layout__content to load every new row, but I don't know If It's the best way to do this.
Here's my main class with 3x3 grid:
<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>
And my attempt to add the next rows to the "extra" div:
$("#view-source").click(function () {
$("#extra").append("New div rows");
});
Probably it is cleaner to keep the new elements in the same level as the older ones.
You could also include each "page" in a unique div with its own id. This way you have a reference to the page so the Browser address can change when the page is reached. This can be used to make a better experience when using infinite scrolling.