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 {
            ani.........完整代码请登录后点击上方下载按钮下载查看