Edit in JSFiddle

<h2>
Infinite Scroll
</h2>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>
<div class="card">
  This is a card.
</div>

var createCard = function() {
  var card = document.createElement('div');
  card.innerHTML = 'This is a card.';
  card.className = 'card';
  return card;
}

var appendCards = function(n) {
	for(var i = 0; i < n; i++) {
  	document.documentElement.appendChild(createCard());
  }
};

window.onscroll = _.throttle(function() {
	var doc = document.body;
  if (doc.scrollTop > doc.scrollHeight - 1000) {
		appendCards(10);
  }
}, 500);