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