Php 将infinit scroll与砌体插件集成，并从MYSQL数据库加载数据

有人能解释一下我做错了什么吗？我尝试将无限卷轴与砌体布局集成，并从数据库加载内容。 我想在向下滚动时从数据库加载图片，最多15张图片

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

这就是我现在所拥有的

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>

$（文档）.ready（函数（）{
//初始化砌体
$（“#容器”）。砌体({
}).imagesLoaded（函数（）{
$（此项）。砌体（“重新加载”）；
});
$container.infinites卷({
导航选择器：'#页面导航'，//页面导航的选择器
下一个选择器：“#页面导航a”，//下一个链接（到第2页）的选择器
itemSelector:'.box'，//将检索的所有项目的选择器
装载：{
FinishedMg:“没有更多页面要加载。”，
img:'http://i.imgur.com/6RMhx.gif'
}
},
//触发器作为回调
函数（新元素）{
//在加载新项目时隐藏它们
var$newElems=$（newElements）.css（{opacity:0}）；
//确保在添加到砌体布局之前加载图像
$newElems.imagesLoaded（函数（）{
//显示元素现在他们准备好了
$newElems.animate（{opacity:1}）；
$container.mashing（'added'，$newElems，true）；
});
}
);
});

---

谢谢

基于示例HTML，您缺少相应的无限滚动设置

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

这部分代码确定了加载下一个内容时应抓取的URL。你的例子是空白的。您需要输入一个有效的URL，无限滚动jquery插件才能访问。当它这样做时，它将查看该页面的内容以附加到当前页面。您已经将其适当地配置为查看

.box

，但是您没有第二页要查看

见：