0

誰かが私が間違っていることを説明できますか? 無限スクロールを石積みレイアウトと統合し、データベースからコンテンツをロードしようとしています。スクロールダウン時にデータベースから画像を 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>

ありがとうございました

4

1 に答える 1

0

HTML の例に基づくと、適切な無限スクロールの設定がありません。

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

コードのこの部分は、次のコンテンツをロードするためにどの URL を取得する必要があるかを確立します。あなたの例は空白です。<nav id="page-nav"><a href="#"></a></nav>無限スクロール jquery プラグインがアクセスするには、有効な URL を入力する必要があります。その場合、そのページのコンテンツを調べて、現在のページに追加します。を参照するように適切に構成しました.boxが、参照するページ 2 がありません。

参照:無限スクロール | jQuery プラグイン

于 2013-02-07T21:27:05.967 に答える