js上拉加载更多

最新推荐文章于 2024-03-05 17:48:34 发布

小李学软件

最新推荐文章于 2024-03-05 17:48:34 发布

阅读量261

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js基础编文章标签： javascript jquery 前端

本文链接：https://blog.youkuaiyun.com/lzDevastator/article/details/104739156

js基础编专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用Bootstrap和jQuery实现的滚动加载效果示例。该示例通过监听滚动事件，在页面接近底部时自动加载更多内容，并利用Bootstrap样式美化页面元素。同时，文章展示了如何使用jQuery和Bootstrap JavaScript插件进行页面交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置视窗大小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 按照ie版本渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 双内核浏览器按照极速模式（谷歌内核）渲染 -->
    <meta name="renderer" content="webkit">
    <title>bootstrap</title>
    <!--  <link rel="stylesheet" href="../dist/css/bootstrap.css"> -->
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .sec {
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh / 3);
            font-size: 80px;
            box-shadow: 50px 50px 100px 20px rgba(0, 0, 0, .6) inset,
                -50px -50px 100px 20px rgba(0, 0, 0, .6) inset,
                50px -50px 100px 20px rgba(0, 0, 0, .6) inset,
                -50px 50px 100px 20px rgba(0, 0, 0, .6) inset,
                2px 2px 5px #fff;
            text-shadow: 3px 3px 3px #fff,
                3px 3px 3px #ccc;
            background-image: radial-gradient(circle, rgba(0, 0, 255, .8), rgba(255, 0, 0, .5), rgba(0, 255, 0, .6), rgba(255, 255, 0, .6));
            /*  filter: blur(1px); */
        }

        .sec span {
            color: #000;
            -webkit-box-reflect: below -45px -webkit-linear-gradient(top, transparent 50%, rgba(0, 0, 0, .6));
        }

        .rotate {
            animation: rotate 1s linear infinite;
        }

        .zoomIn {
            animation: scale .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes scale {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }

        .alert {
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="sec"><span class="zoomIn">10</span></div>
    <div class="sec"><span class="zoomIn">9</span></div>
    <div class="sec"><span class="zoomIn">8</span></div>
    <div class="sec"><span class="zoomIn">7</span></div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- <script src="../dist/js/jquery-2.1.0.js"></script>
    <script src="../dist/js/bootstrap.js"></script> -->
    <script>
        //全局变量
        var count = 7, timer, noData = true;
        //判断文档位置
        function onReachBottom(callback) {
            //文档的高度
            var docHeight = $(document).height();
            //窗口的高度
            var winHeight = $(window).height();
            //滚动条滚动的距离
            var scrollTop = $(window).scrollTop();
            //判断是否到达文档底部
            if (docHeight - winHeight - scrollTop < 200) {
                console.log("我是有底线的");
                callback()
            }
        }
        //添加警示框 
        function appendAlert() {
            //判断警示框是否含有长度
            if (!$("#alert").length) {
                //判断警告框的内容
                var msg = noData ? '<i class="glyphicon glyphicon-refresh rotate"></i>' : '我是有底线的！！！';
                //判断警告框的的类名
                var alertClass = noData ? "info" : "danger";
                //先把警告框存起来
                var alert =
                    '<div id="alert" class="alert fade in alert-' + alertClass + ' text-center">\
                         '+ msg + '\
                         <button class="close" data-dismiss="alert">&times;</button>\
                    </div>'
                //把警告插入到文档中
                $('body').append(alert);
            }
        }
        //加数字容器
        function appendSection() {
            //把需要插入的数字存起来
            var sec = '<div class="sec"><span>' + --count + '</span></div>';
            //把数字插到文档中
            $("body").append(sec);
            //把之前插入的警示框移除
            $("#alert").remove();
        }
        //给span标签加类名
        function addClassSpan() {
            //找出加载出来的span标签
            var $lastSpan = $(".sec:last").find("span");
            //给span标签加类名
            if (!$lastSpan.hasClass("zoomIn")) $lastSpan.addClass("zoomIn");
        }
        /*  //防抖
         function debounce(callback) {
             clearTimeout(timer);
             timer = setTimeout(function () {
                 callback()
             }, 1000)
         } */
        //节流
        function throttle(callback) {
            if (!timer) {
                timer = setTimeout(function () {
                    callback();
                    timer = false;
                }, 500)
            }
        }
        //加载更多方法集合
        function loadMore() {
            //当加载内容的数为0 时停止加载
            if (count <= 0) {
                if (noData) {
                    //关闭开关
                    noData = false;
                    appendAlert();
                    // addClassSpan();
                    // appendSection();
                }
                //达到条件是关闭函数
                return false;
            }
            appendAlert();
            throttle(appendSection);
            addClassSpan();
        }
        //滚动条移动时执行函数
        $(window).on("scroll", function () {
            onReachBottom(loadMore)
        })
    </script>


</body>

</html>