js实现图片无限下拉滚动分页加载效果-html代码-BFW代码库

js实现图片无限下拉滚动分页加载效果

代码语言：html

代码描述：js实现图片无限下拉滚动分页加载效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind:wght@400&amp;display=swap'>
    <style>
        * {
            border: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
:root {
            --bg: #e5e5e5;
            --cardBg: #f1f1f1;
            --fg: #171717;
            --linkFg: #2762f3;
            --transDur: 0.25s;
            font-size: calc(16px + (20 - 16)*(100vw - 320px)/(2560 - 320));
        }
        body {
            background: var(--bg);
            color: var(--fg);
            font: 1em/1.5 "Hind", sans-serif;
        }
        a {
            color: var(--linkFg);
        }
        /* Grid */
        .image-grid {
            display: grid;
            grid-gap: 1.5em;
            margin: 1.5em 1.5em 13.5em 1.5em;
        }
        .image-grid__card {
            animation: flyIn var(--transDur) ease-in;
            background: var(--cardBg);
            border-radius: 0.25em;
            box-shadow: 0 0 0.375em #0003;
            width: 100%;

        }
        .image-grid__card a {
            background: #0003;
            border-radius: 0.25em 0.25em 0 0;
            display: block;
            overflow: hidden;
            position: relative;
            height: 9.75em;
            will-change: transform;
        }
        .image-grid__card a:focus {
            outline: transparent;
        }
        .image-grid__card a:focus .image-grid__card-thumb,
        .image-grid__card a:hover .image-grid__card-thumb {
            opacity: 0.5;
        }
        .image-grid__card-thumb {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            height: 100%;
            transition: all var(--transDur) linear;
            transform: translate(-50%,-50%);
        }
        .image-grid__card-thumb--portrait {
            width: 100%;
            height: auto;
        }
        .image-grid__card-title {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 0.375em 0.75em;
        }
        .image-grid__status {
            animation: fadeIn var(--transDur) linear;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
        }
        /* Preloader */
        .pl, .pl:before, .pl:after {
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .pl {
            margin: 0 auto 1.5em auto;
            position: relative;
            width: 3em;
            height: 3em;
        }
        .pl:before, .pl:after {
            background: currentColor;
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            transform-origin: 50% 100%;
            clip-path: polygon(0 0,100% 0,50% 100%);
            -webkit-clip-path: polygon(0 0,100% 0,50% 100%);
        }
        .pl-fade:before {
            animation-name: fadeA;
        }
        .pl-fade:after {
            animation-name: fadeB;
        }
        /* Animations */
@keyframes flyIn {
            from {
                opacity: 0;
                transform: translateY(3em);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
@keyframes fadeA {
            from, to {
                opacity: 1;
                transform: rotate(0deg)
            }
            25%, 75.1% {
                opacity: 0;
                transform: rotate(0deg)
            }
            25.1%, 75% {
                opacity: 0;
                transform: rotate(180deg)
            }
            50% {
                opacity: 1;
                transform: rotate(180deg)
            }
        }
@keyframes fadeB {
            from, 50% {
                opacity: 0;
                transform: rotate(90deg)
            }
            25% {
                opacity: 1;
                transform: rotate(90deg)
            }
            50.1%, to {
                opacity: 0;
                transform: rotate(270deg)
            }
            75% {
                opacity: 1;
                transform: .........完整代码请登录后点击上方下载按钮下载查看