Question

我有一个带有大数据的div（很多子div），我想在这个div上实现一个无限滚动，我尝试了一些可以在互联网上使用的jquery脚本，例如：

以及我在谷歌上可以找到的更多内容。

大多数脚本执行ajax调用来获取数据（但我已经有了数据）

我能够使用下一个和以前的功能实现自定义分页如本例所示 Custom Pagination with Next and Prev Button

但我想实现一个无限滚动

这是div示例

<div class="InfiniteScroll">
  <div class="line-content">1 I have some content</div>  
  <div class="line-content">2 I have some content</div>
  <div class="line-content">3 I have some content</div>
  <div class="line-content">4 I have some content</div>
  <div class="line-content">5 I have some content</div>
  <div class="line-content">6 I have some content</div>
  <div class="line-content">7 I have some content</div>
  <div class="line-content">8 I have some content</div>
  <div class="line-content">9 I have some content</div>
  <div class="line-content">10 I have some content</div>
  <div class="line-content">11 I have some content</div>
  ..
  ..
  ..
  ..
  ..
  ..
  ..
  <div>AND MANY MORE</div> 
</div>

小提琴测试：Fiddle For Test

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
    margin: 0;
    font-family: 'Liberation Sans', Arial, sans-serif;
}

h1 {
    text-align: center;
}

#posts {
    margin: 0 auto;
    padding: 0;
    width: 700px;
    list-style-type: none;
}

article h1 {
    text-align: left;
    border-bottom: 1px dotted #E3E3E3;
}

article p {
    text-align: justify;
    line-height: 1.5;
    font-size: 1.1em;
}

#loading {
    display: none;
    text-align: center;
}
</style>
<script>

$(document).ready(function() {
    var win = $(window);

    // Each time the user scrolls
    win.scroll(function() {
        // End of the document reached?
        if ($(document).height() - win.height() == win.scrollTop()) {
            $('#loading').show();

            // Uncomment this AJAX call to test it
            /*
            $.ajax({
                url: 'get-post.php',
                dataType: 'html',
                success: function(html) {
                    $('#posts').append(html);
                    $('#loading').hide();
                }
            });
            */

            $('#posts').append(randomPost());
            $('#loading').hide();
        }
    });
});

// Generate a random post
function randomPost() {
    // Paragraphs that will appear in the post
    var paragraphs = [
        '<p> </p>'];

    // Shuffle the paragraphs
    for (var i = paragraphs.length - 1; !!i; --i) {
        var j = Math.floor(Math.random() * i);
        var p = paragraphs[i];
        paragraphs[i] = paragraphs[j];
        paragraphs[j] = p;
    }

    // Generate the post
    var post = '<li>';
    post += '<article>';
    post += '<header><h1>Datas</h1></header>';
    post += paragraphs.join('');
    post += '</article>';
    post += '</li>';

    return post;
}
</script>
</head>
<body>


        <div id="posts">
        
               

                    <p class="line-content">1 I have some content</p>
					   <p class="line-content">1 I have some content</p>
					      <p class="line-content">1 I have some content</p>
						     <p class="line-content">1 I have some content</p>
							    <p class="line-content">1 I have some content</p>
								   <p class="line-content">1 I have some content</p>
								      <p class="line-content">1 I have some content</p>
									     <p class="line-content">1 I have some content</p>   
										 <p class="line-content">1 I have some content</p>   
										 <p class="line-content">1 I have some content</p>
										    <p class="line-content">1 I have some content</p> 
											<p class="line-content">1 I have some content</p> 
											<p class="line-content">1 I have some content</p>  
											<p class="line-content">1 I have some content</p>  
											<p class="line-content">1 I have some content</p>   
											<p class="line-content">1 I have some content</p>  

											<p class="line-content">1 I have some content</p>  
											<p class="line-content">1 I have some content</p>  
											<p class="line-content">1 I have some content</p>  
											<p class="line-content">1 I have some content</p>  
											<p class="line-content">1 I have some content</p>  
											<p class="line-content">1 I have some content</p>

        </div>

    

</body>
</html>

＆＃13;

我尝试了现有插件并根据您的要求进行了修改。在浏览器中运行，希望这能解决您的问题。

Answer 2

使用的窗口滚动和窗口高度偏移为我工作

Code snippet

var $doc=$(document);
var $win=$(window);
var itemstoshow=5;

$('.infinite').filter(function(index){
    return (($(this).offset().top) > $win.height());
}).hide();

$(window).scroll(function(){ 
    if ($doc.height()-$win.height()-$(this).scrollTop() == 0) {
        $('.infinite:hidden:lt('+itemstoshow+')').show();
    }
});

在已经填充的div上无限滚动

2 个答案: