Как использовать JQuery Infinite AJAX Scroll, включая цикл

Поскольку я новичок в JavaScript, я здесь, чтобы изучить некоторые методы.
Я пытаюсь реализовать в своем коде бесконечную прокрутку Ajax.
Это моя страница php:

<div class="row row-sm padder-lg ">
<?php
foreach ($top->feed->entry as $key => $value)
{
$value->title->label = str_ireplace( "- ".$value->author->label, "",  $value->title->label);
if($key >= $this->config->item("items_top"))
return false;
$image = $value->image[2]->label;
if($image == '')
$image = base_url()."assets/images/no-cover.png";
$image = str_ireplace("170x170", "200x200", $image);
?>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="item">
<div class="pos-rlt">
<a onclick="get_more('<?php echo addslashes($value->title->label); ?>','<?php echo addslashes($value->author->label); ?>','<?php echo $image; ?>'); ?>');"  href="#">
<div class="item-overlay opacity r r-2x bg-black">
<div class="center text-center m-t-n">
<i class="icon-control-play i-2x"></i>
</div>
</div>
<a href="#">
<div class="r r-2x img-full" style="background:url('<?php echo $image; ?>') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;">
<div style="height:180px;overflow:hidden;"></div>
</div>
</a>
</a>
</div>

</div>
</div>
<?php
}
?>
<script>
$(".removehref").attr("href","#");
</script>

Я решил использовать этот jQuery для этой цели: Бесконечный свиток AJAX
В примере это то, что я должен был сделать:

<div class="container">
<div class="item">...</div>
<div class="item">...</div>
</div>

<div id="pagination">
<a href="page1.html">1</a>
<a href="page2.html" class="next">2</a>
</div>

Легко и просто … но не в моем случае.
Действительно, контейнер более сложный, внутри есть петля, что мне делать? А как насчет нумерации страниц?

РЕДАКТИРОВАТЬ
Как и предполагалось, это больше подходит для моего случая без использования jQuery выше, однако я запутался в использовании.

Как я мог использовать мою петлю foreach в function doSomething() { ?

 <script>
$(document).scroll(function(e){
// grab the scroll amount and the window height
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
// calculate the percentage the user has scrolled down the page
var scrollPercent = (scrollAmount / documentHeight) * 100;
if(scrollPercent > 50) {
// run a function called doSomething
doSomething();
}
function doSomething() {
// do something when a user gets 50% of the way down my page
}
});
</script>