JQuery：事前ロードされたデータの無限（有限）スクロール

私はデータを持っており、私はそれぞれ4列のDivグリッドのフォームを持っています。JQuery：事前ロードされたデータの無限（有限）スクロール

あらかじめロードされたデータに無限（有限）スクロールが必要です。

私は、スクロールダウンしてからメインのdivの下に達すると、次のグリッドデータを表示します。

私はすでにデータを持っておりDiv Gridを作成しています。

Waypoint Infinite Scrollで行うことをお勧めしますか？

更新： -

$(document).ready(function() { 
 
    var infinite = new Waypoint.Infinite({ 
 
    element: $('.infinite-container')[0] 
 
    }); 
 
}); 
 

 
function MyFunction() { 
 
    alert("HI"); 
 
    for (var i = 0; i < 5; ++i) { 
 
    var div = "<div class='infinite-item'> <div class='square-box'> <div class='square-content'> test </div> </div> <div class='square-box'> <div class='square-content'> test test </div>"; 
 

 
    } 
 
    return false; 
 
}

.square-box { 
 
    position: relative; 
 
    width: 200px; 
 
    overflow: hidden; 
 
    background: #4679BD; 
 
    display: inline-block; 
 
} 
 
.square-box:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
.square-content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    color: white; 
 
    text-align: center; 
 
}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> 
 
    <!DOCTYPE html > 
 
    <html> 
 

 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>Tutorials</title> 
 
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
 
    <script type="text/javascript" src="jquery.waypoints.min.js"></script> 
 
    <script type="text/javascript" src="infinite.js"></script> 
 

 
    </head> 
 

 
    <body> 
 
    <div class="infinite-container"> 
 
     <div class="infinite-item"> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 1 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 2 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 3 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 4 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="infinite-item"> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 11 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 12 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 13 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 14 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="infinite-item"> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 111 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 112 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 113 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 114 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="infinite-item"> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 1111 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 2222 
 
      </div> 
 
     </div> 
 
     <div class=' square-box'> 
 
      <div class='square-content'> 
 
      test 3333 
 
      </div> 
 
     </div> 
 
     <div class='square-box'> 
 
      <div class='square-content'> 
 
      test 4444 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a class="infinite-more-link" href="">More</a> 
 
    <!-- javascript:MyFunction(); return false; --> 
 
    </body> 
 
    <style type="text/css"> 
 
    </style> 
 

 
    </html>

ありがとうございます。

出典

2016-05-23 Shantaram Tupe

そして...これまでに何を試しましたか？（このテキストを追加するには、コメントの横にボタンが必要です）。次に、SOを検索します。これは複製になります。 –

https://stackoverflow.com/questions/11146298/onclick-show-next-divs –

clickイベントを使用するwontは、divの下部にあるスクロールリーチを使用して行います。 –

ここに行きます。また、this codeを貼り付けて、別のファイルに入れてください（また、そのファイルに含めることを忘れないでください）。また、すべてのスタイルを別々のファイルに入れておくことをお勧めします。また、test2.phpを持っている必要があります（または、その場合は、コードの最後にjQueryスクリプトを更新する必要があります）。それは私がテストしたので動作します：

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Tutorials</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="[email protected]*"></script> 
<style type="text/css"> 
.square-box { 
    position: relative; 
    width: 200px; 
    overflow: hidden; 
    background: #4679BD; 
    display: inline-block; 
} 
.square-box:before { 
    content: ""; 
    display: block; 
    padding-top: 100%; 
} 
.square-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    color: white; 
    text-align: center; 
} 
</style> 
</head> 

<body> 
<div class="infinite-container"> 
    <div class="infinite-item"> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 1 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 2 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 3 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 4 
     </div> 
    </div> 
    </div> 

    <div class="infinite-item"> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 11 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 12 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 13 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 14 
     </div> 
    </div> 
    </div> 

    <div class="infinite-item"> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 111 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 112 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 113 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 114 
     </div> 
    </div> 
    </div> 

    <div class="infinite-item"> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 1111 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 2222 
     </div> 
    </div> 
    <div class=' square-box'> 
     <div class='square-content'> 
     test 3333 
     </div> 
    </div> 
    <div class='square-box'> 
     <div class='square-content'> 
     test 4444 
     </div> 
    </div> 
    </div> 
</div> 
<nav id="pagination"> 
    <p><a class="infinite-more-link" href="test2.php">More</a></p> 
</nav> 

<script> 
$(document).ready(function() 
{ 
    var win = $(window); 

    // Each time the user scrolls 
    win.scroll(function() 
    { 
     if ($(document).height() - win.height() == win.scrollTop()) { 

      $.ajax({ 
       url: 'test2.php', 
       dataType: 'html', 
       success: function(html) { 
        $('.infinite-container').append(html); 
       } 
      }); 
     } 
    }); 
}); 
</script> 

</html>

出典

2016-05-23 13:03:34

どのような追加情報ですか？私は提供する必要がありますか？ plz ask ... –

たとえば、情報/表の表示を担当するWebサイト（HTML 1）の現在のコード。あなたは、テーブル、div、段落などを知っています。少なくとも、jQueryをより正確に表示する方法は想像できます。 –

@ Edvin Tenovim、私は質問を更新しました... –

JQuery：事前ロードされたデータの無限（有限）スクロール

答えて

関連する問題