js题目2-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145679898

<!DOCTYPE html>
<html lang="zh - CN">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>瀑布流布局</title>
    <style>
      #waterfall {
        column-count: 6;
        column-gap: 10px;
    }

      #waterfall img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        break-inside: avoid;
      }
    </style>
</head>

<body>
    <div id="waterfall">
        <!-- 图片将动态插入这里 -->
    </div>
    <script>
      const waterfall = document.getElementById('waterfall');
let page = 1;
const perPage = 25;

function loadImages() {
    const imgUrls = [];
    // 模拟图片URL生成逻辑，这里可替换为真实的图片URL获取逻辑
    for (let i = (page - 1) * perPage; i < page * perPage; i++) {
        imgUrls.push(`https://picsum.photos/id/${i}/200/300`);
    }

    imgUrls.forEach(url => {
        const img = document.createElement('img');
        img.src = url;
        waterfall.appendChild(img);
    });

    page++;
}

// 初始加载
loadImages();

window.addEventListener('scroll', () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight - 100) {
        loadImages();
    }
});


    </script>
</body>

</html>