Вопрос бесконечной прокрутки jQuery в галерее кладки

я использую jQuery Бесконечный свиток плагин для кладки галереи. Кладка галереи работает без каких-либо проблем. Но бесконечная прокрутка загружает следующую страницу до того, как дойдет до дна. Также загрузка изображения не всегда отображается.

index.php

<?php

$con = mysqli_connect('localhost','root','root','database');

$per_page = 10;

if (isset($_GET["page"])) {

$page = $_GET["page"];
}
else {
$page=1;
}

$start_from = ($page-1) * $per_page;

$query = "SELECT * FROM data ORDER BY rand() LIMIT $start_from, $per_page";
$result = mysqli_query ($con, $query);

while ($row = mysqli_fetch_array($result)) {

?><div id="gallery">
<ul id ="container" class="transitions-enabled infinite-scroll clearfix">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
</ul>

<?php } ?>

<nav id="page-nav">
<a href="index.php?page=<?php echo $page ?>"></a>
</nav>
</div>

Я думаю, что эта проблема связана с этими кодами PHP, потому что коды сценариев jQuery работают без каких-либо проблем. каким-то образом этот php кодирует загрузку 10 изображений для следующей страницы из базы данных. Пожалуйста, могу ли я иметь хороший код PHP для бесконечной прокрутки больше, чем это?

script.js

  $(function(){

var $container = $('#container');

$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
columnWidth: 100
});
});

// infinite scroll options...
$container.infinitescroll({
navSelector  : '#page-nav',    // selector for the paged navigation
nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
itemSelector : '.item',     // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);

});