How to implement js scrolling click to load more data code?

This article mainly introduces the function of using js to scroll the scroll bar to the bottom of the page to click to load more. Compared with most websites, isscroll.js is used to realize the pull-up to load more or the pull-down to refresh function. Easier for everyone to understand. The simple idea here is that all the data on the page, according to the display requirements, which parts are displayed, then the rest is hidden. If there is still data, just click to load more and continue to display the data; until no more data is displayed, loading complete will appear.

When loading, you can set it to display "Loading..." If more data is not displayed, you can add a "Click to load more" button at the bottom. Until there is no more data, it will be displayed that all loading is completed.

js scrolling click to load more data The specific sample code is as follows：

<div class="loading">
    <div class="hidden"></div>
    <ul class="img-list"><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/1.png" alt="" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/2.png" alt="XC-PH-W02" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/3.png" alt="XC-PH-W06" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/4.png" alt="XC-PH-W07" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li></ul>
    <a href="javascript:;" onclick="loading.loadMore();"><div class="btn-more">点击加载更多</div></a>
</div>
<script src="js/jquery.min.js"></script>
<script>
    var _content = [];//临时存储li循环内容
    var loading = {
        _default : 9,//默认显示图片个数
        _loading : 9,//每次点击按钮后加载的个数
        init : function() {
            var lis = $(".loading .hidden li");
            $(".loading ul.img-list").html("");
            for (var n = 0; n < loading._default; n++) {
                lis.eq(n).appendTo(".loading ul.img-list");
            }
            $(".loading ul.img-list img").each(function() {
                $(this).attr(&#39;src&#39;, $(this).attr(&#39;realSrc&#39;));
            })
            for (var i = loading._default; i < lis.length; i++) {
                _content.push(lis.eq(i));
            }
            $(".loading .hidden").html("");
        },
        loadMore : function() {
            var mLis = $(".loading ul.img-list li").length;
            for (var i = 0; i < loading._loading; i++) {
                var target = _content.shift();
                if (!target) {
                    $(&#39;.loading .btn-more&#39;).html("<p>全部加载完毕</p>");
                    break;
                }
                $(".loading ul.img-list").append(target);
                $(".loading ul.img-list img").eq(mLis + i).each(function() {
                    $(this).attr(&#39;src&#39;, $(this).attr(&#39;realSrc&#39;));
                });
            }
        }
    }
    loading.init();
</script>

I hope this article will introduce about using js to achieve clicks The ability to load more data helps everyone!

[Related article recommendations]

How does Jquery implement pull-up loading and more

Based on ajax to implement click-to-load more Loading this page without refreshing

How to implement scrolling loading of more functions in vue

$.ajax php practical tutorial when pulling down Explanation of the principle of automatically loading more articles

Example code to achieve page pull-up loading effect

##

The above is the detailed content of How to implement js scrolling click to load more data code?. For more information, please follow other related articles on the PHP Chinese website!