js考核第二题-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_88560642/article/details/145672213

题二：瀑布流布局

要求：多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片。

html部分

<body>
    <div class="container"></div>
</body>

css部分

  body {
            margin: 0;
            padding: 0;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            padding: 10px;
        }

        .container img {
            width: 100%;
            height: auto;
            display: block;
        }

js部分

  document.addEventListener('DOMContentLoaded', function () {
            const container = document.querySelector('.container');
            let page = 1;
            const perPage = 20;
            const image1 = 'https://img14.360buyimg.com/n1/jfs/t1/256917/15/11473/120071/67833d0cF89363a16/bb4cd73787dbfe2f.jpg.avif';

            function loadImages() {
                setTimeout(() => {
                    for (let i = 0; i < perPage; i++) {
                        const img = document.createElement('img');
                        img.src = image1;
                        img.alt = `Image ${page * perPage + i}`;
                        container.appendChild(img);
                    }
                    page++;
                }, 1000);
            }

            function handleScroll() {
                const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
                if (scrollTop + clientHeight >= scrollHeight - 10) {
                    loadImages();
                }
            }

            loadImages();

            window.addEventListener('scroll', handleScroll);
        });

实现视频

js第二题