将无限滚动与砖石插件集成，并从MYSQL数据库加载数据

有人能解释一下我做错了什么吗？我尝试将无限滚动与砖石布局集成，并从我的数据库中加载内容。我想在向下滚动时从我的数据库中加载图片，限制为15张图片。

共济会的布局很好，但我不知道无限卷轴有什么问题。

这就是我现在所拥有的。

HTML代码

<div id="container">
    <?php
    $sql_res=mysql_query("SELECT * FROM test ORDER BY id DESC LIMIT 15");
    while($row=mysql_fetch_array($sql_res))
        {
    $image_name=$row['image_name'];
    $id=$row['id'];
    ?>
<div class="box">

<a href="content.php?id=<?php echo $row['id']; ?>" ><img src="/content/<?php echo   
$image_name; ?>"></a>
</div>
<?php } ?>
</div>
<nav id="page-nav">
<a href="#"></a>
</nav>

砌体的JS代码

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script >
$(document).ready(function() {
// Initialize Masonry
$('#container').masonry({
}).imagesLoaded(function() {
    $(this).masonry('reload');
});
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // 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 ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true ); 
    });
  }
);
});
</script>

感谢

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)