博客无限滚动加载（html、css、js）实现

news2024/11/24 20:57:49

介绍

这是一个简单实现了类似博客瀑布流加载功能的页面，使用html、css、js实现。简单易懂，值得学习借鉴。👍

演示地址：https://i_dog.gitee.io/easy-web-projects/infinite_scroll_blog/index.html

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>博客</h1>
    <div class="filter-container">
        <input type="text" class="filter" id="filter" placeholder="搜索文章">
    </div>
    <div id="posts-container"></div>
    
    <div class="loader">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

style.css

/* 从Google Fonts（谷歌字体）中导入名为"Roboto"的字体，并将其应用于网页中的文本内容。 */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: #296ca8;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    color: #fff;
    /* 元素在侧轴居中。 */
    align-items: center;

    /* 伸缩元素向每主轴中点排列。 */
    justify-content: center;

    min-height: 100vh;
    margin: 0;
    padding-bottom: 100px;
}
h1 {
    margin-bottom: 20px;
    text-align: center;
}
.filter-container {
    margin-top: 20px;
    width: 80vw;
    max-width: 800px;
    /* border: 1px solid black; */
}
.filter {
    width: 100%;
    padding: 12px;
    font-size: 16px;
}

.post {
    position: relative;
    background: #4992d3;

    /* 
        创建一个元素的阴影效果
        水平偏移量 垂直偏移量 阴影的模糊半径  阴影的颜色和透明度
    */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    padding: 20px;
    margin: 40px 0;
    display: flex;
    width: 80vw;
    max-width: 800px;
}

.post .post-title {
    margin: 0;
}
.post .post-body {
    margin: 15px 0 0;
    line-height: 1.3;
}

.post .post-info {
    margin-left: 20px;
}
.post .number {
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #296ca8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
  }
.loader {
    /* 默认透明 */
    opacity: 0;
    display: flex;
    position: fixed;
    bottom: 50px;
    /* 
        添加过渡效果
        要过渡的CSS属性   过渡的持续时间   过渡的速度曲线
    */
    transition: opacity 0.3s ease-in;
}
.loader.show {
    opacity: 1;
}
.circle {
    background-color: #fff;
    width: 10px;
    height: 10px;

    /* 呈现出一个完整的圆形形状 */
    border-radius: 50%;
    margin: 5px;

    /* 
        添加动画效果 
        应用的动画名称  动画的持续时间  动画的速度曲线  动画循环播放
    */
    animation: bounce 0.5s ease-in infinite;
}

/* 选择文档中第一个类名为"circle"的元素 */
.circle:nth-of-type(2) {
    animation-delay: 0.1s;
}
.circle:nth-of-type(3) {
    animation-delay: 0.2s;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);    
    }
    50% {
        transform: translateY(-10px);
    }
}

script.js

const postsContainer = document.getElementById('posts-container')
// 获取文档中具有类名"loader"的第一个元素
const loading = document.querySelector('.loader')
const filter = document.getElementById('filter')

let limit = 5
let page = 1

// 从API获取博客
async function getPosts() {
    // 使用await关键字等待fetch()函数返回的Promise对象，
    // 这个Promise对象表示服务器响应的结果。
    const res = await fetch(
        `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
    )

    // 使用res.json()方法将响应体解析为JSON格式的数据。
    const data =  await res.json()
    
    return data
}

// 在DOM中展示博客列表
async function showPosts() {
    const posts = await getPosts()

    posts.forEach(post => {
        const postEl = document.createElement('div')
        postEl.classList.add('post')
        postEl.innerHTML = `
            <div class="number">${post.id}</div>
            <div class="post-info">
                <h2 class="post-title">${post.title}</h2>
                <p class="post-body">${post.body}</p>
            </div>
        `
        postsContainer.appendChild(postEl)
    })
}

// 展示加载动画并且获取其他博客
function showLoading() {
    loading.classList.add('show')

    setTimeout(() => {
        loading.classList.remove('show')

        setTimeout(() => {
            page++
            showPosts()
        },300)
        

    },1000)
}

// 搜索框查找博客
function filterPosts(e) {
    const term = e.target.value.toUpperCase()
    const posts = document.querySelectorAll('.post')

    posts.forEach(post => {
        const title = post.querySelector('.post-title').innerText.toUpperCase()
        const body = post.querySelector('.post-body').innerText.toUpperCase()

        if(title.indexOf(term) > -1 || body.indexOf(term) > -1) {
            post.style.display = 'flex'
        } else {
            post.style.display = 'none'
        }
    })
    // console.log('Filtering posts...');
}

// 获取初始博客
showPosts()

window.addEventListener('scroll', () => {
    // scrollTop属性表示文档在垂直方向上滚动的距离，
    // scrollHeight属性表示文档内容的总高度，
    // clientHeight属性表示可视区域的高度。
    const {scrollTop, scrollHeight, clientHeight} = document.documentElement

    if (scrollTop + clientHeight >= scrollHeight - 5) {
        showLoading()
    }
})

filter.addEventListener('input', filterPosts)