砌体画廊上的jQuery无限滚动问题

Question

我正在使用jQuery Infinite-Scroll插件进行砌体库。砌体画廊工作没有任何问题。但无限滚动在到达底部之前加载下一页。另外加载图像不会始终显示。

  

的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 ); 
        });
      }
    );

  });