博客无限滚动加载（html、css、js）实现
- 电脑硬件
- 2025-08-18 03:51:02
介绍
这是一个简单实现了类似博客瀑布流加载功能的页面，使用html、css、js实现。简单易懂，值得学习借鉴。👍
演示地址： 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(' fonts.googleapis /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( ` jsonplaceholder.typicode /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) 补充该项目从github中的vanillawebprojects仓库收集。
原始代码：原始代码地址 github /bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog
本文代码：本文代码地址 gitee /i_dog/easy-web-projects/tree/master/infinite_scroll_blog
博客无限滚动加载（html、css、js）实现由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“博客无限滚动加载（html、css、js）实现”
下一篇
netty拆包/粘包
