城市分站网站设计,网站推广一般多少钱,婚庆公司网站设计,龙岗在线网站制作介绍
这是一个简单实现了类似博客瀑布流加载功能的页面#xff0c;使用html、css、js实现。简单易懂#xff0c;值得学习借鉴。#x1f44d;
演示地址#xff1a;https://i_dog.gitee.io/easy-web-projects/infinite_scroll_blog/index.html 代码
index.html
!DOCT…介绍
这是一个简单实现了类似博客瀑布流加载功能的页面使用html、css、js实现。简单易懂值得学习借鉴。
演示地址https://i_dog.gitee.io/easy-web-projects/infinite_scroll_blog/index.html 代码
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我的博客/titlelink relstylesheet hrefstyle.css
/head
bodyh1博客/h1div classfilter-containerinput typetext classfilter idfilter placeholder搜索文章/divdiv idposts-container/divdiv classloaderdiv classcircle/divdiv classcircle/divdiv classcircle/div/divscript srcscript.js/script
/body
/html
style.css
/* 从Google Fonts谷歌字体中导入名为Roboto的字体并将其应用于网页中的文本内容。 */
import url(https://fonts.googleapis.com/css?familyRobotodisplayswap);* {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 classnumber${post.id}/divdiv classpost-infoh2 classpost-title${post.title}/h2p classpost-body${post.body}/p/divpostsContainer.appendChild(postEl)})
}// 展示加载动画并且获取其他博客
function showLoading() {loading.classList.add(show)setTimeout(() {loading.classList.remove(show)setTimeout(() {pageshowPosts()},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.documentElementif (scrollTop clientHeight scrollHeight - 5) {showLoading()}
})filter.addEventListener(input, filterPosts)
补充
该项目从github中的vanillawebprojects仓库收集。
原始代码原始代码地址https://github.com/bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog
本文代码本文代码地址https://gitee.com/i_dog/easy-web-projects/tree/master/infinite_scroll_blog
