jQuery infinite scroll issue on a masonry gallery - php

Question

I'm using jQuery Infinite-Scroll plugin for a masonry gallery. Masonry gallery working without any issue. But infinite scroll loads next page before reaching the bottom.also loading image not showing always.
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">
</nav>
</div>
I think this issue related to this PHP codes because jQuery script codes are working without any issue. somehow this php codes loading 10 images for next page from database. Please can I have a good PHP code for infinite scroll more than this?
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 );
});
}
);
});