JQuery：在预加载的数据上进行无限（有限）滚动

我有数据，而且我有每个4列的Div Grid。JQuery：在预加载的数据上进行无限（有限）滚动

欲无限（有限的）上滚动的预加载的数据。

我想下显示滚动后下一格的数据，并达到主格的底部。

我不想用Ajax做打电话我已经有数据和形成事业部的网格。

任何想法与航点无限滚动做呢？

更新： -

$(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 –

不要Wnt信号使用单击事件，要在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 ... –

例如，您在网站（HTML一）中的当前代码负责显示信息/表格。你知道，表，divs，段落等。至少我会想象如何更准确地显示jQuery。 –

@ Edvin Tenovim，我已经更新了我的问题... –

JQuery：在预加载的数据上进行无限（有限）滚动

回答

相关问题