博客无限滚动加载（html、css、js）实现
介绍
这是一个简单实现了类似博客瀑布流加载功能的页面，使用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.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
相关文章：
博客无限滚动加载（html、css、js）实现
介绍 这是一个简单实现了类似博客瀑布流加载功能的页面，使用html、css、js实现。简单易懂，值得学习借鉴。👍 演示地址：https://i_dog.gitee.io/easy-web-projects/infinite_scroll_blog/index.html 代码 index.html <!DOCT…...
腾讯云南京服务器性能如何？南京服务器测速IP地址
腾讯云服务器南京地域怎么样？南京地域很不错，正好处于中间的位置，南方北方用户均可以选择，网络延迟更低速度更快，并且目前南京地域有活动，南京地域可用区可选南京一区、南京二区和南京三区，腾讯…...
MySQL和Oracle中，语法的不同点以及如何在xml中书写日期比较大小
众所周知mysql和oracle的语法有点相识，又有点不同。 在MySQL和Oracle中，语法的不同点有以下几个方面： 数据类型：MySQL和Oracle支持的数据类型有所不同，比如MySQL支持的数据类型包括：整型、浮点型、字符型、…...
谈谈Redis分布式锁
目录 一、回顾分布式锁 （一）理解分布式锁的定义 （二）分布式锁的约束条件 （三）分布式锁常见实现方式 基于数据库的分布式锁 基于缓存的分布式锁 基于分布式一致性算法的分布式锁 基于文件系统的分布…...
Redis的java客户端-RedisTemplate光速入门
一.创建springboot项目 二.引入2个依赖 <!-- redis依赖-->这个已经引入了，因为创建的时候勾选了<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><…...
格点数据可视化(美国站点的日降雨数据)
获取美国站点的日降雨量的格点数据，并且可视化 导入模块 from datetime import datetime, timedelta from urllib.request import urlopenimport cartopy.crs as ccrs import cartopy.feature as cfeature import matplotlib.colors as mcolors import matplotli…...
YoloV8改进策略：LSKNet加入到YoloV8中，打造更适合小目标的YoloV8
文章目录 摘要论文：LSKNet：大选择核网络在遥感目标检测中的应用1、简介2、相关工作2.1、遥感目标检测框架2.2、大核网络2.3、注意力/选择机制3、方法3.1、LSKNet架构3.2、大核卷积3.3、空间核选择4、实验4.1、数据集4.2、实现细节4.3、消融实验4.4、主要结果4.5、分析5、结论…...
力扣-303.区域和检索-数组不可变
Idea 需计算数组nums在下标right 和 left-1 的前缀和，然后计算两个前缀和的差即可。 需要注意的是，当left为0的时候，如果还是left-1则会发生数组访问越界错误。 AC Code class NumArray { public:vector<int> sum;NumArray(vector<…...
web：[极客大挑战 2019]LoveSQL
题目 打开页面显示如下 查看源代码，查到一个check.php，还是get传参 尝试账号密码输入 题目名为sql，用万能密码 1or 11# 或 admin or 11 给了一段乱码，也不是flag 查看字段数 /check.php?usernameadmin order by 3%23&pass…...
数据结构—快速排序（续）
引言：在上一篇中我们详细介绍了快速排序和改进，并给出了其中的一种实现方式-挖坑法 但其实快速排序有多种实现方式，这篇文章再来介绍其中的另外两种-左右指针法和前后指针法。有了上一篇挖坑法的启示，下面的两种实现会容易许多。 …...
Snapdragon Profiler分析Android GPU
Snapdragon Profiler（骁龙分析器）是一款性能分析软件，在Windows、 Mac、和 Linux平台上都可以运行，主要是用来分析使用了高通骁龙处理器的Android设备。 Snapdragon Profiler通过USB连接这些Android设备，开发者可以用…...
Cannot download sources：IDEA源码无法下载
问题 Swagger的相关包，无法看到注释； 在class文件的页面，点击下载源码，源码下载不了，IDEA报下面的错误。 报错 Cannot download sources Sources not found for: io.swagger.core.v3:swagger-annotations:2.2.9 解决…...
从零开始学习 Java：简单易懂的入门指南之IO字符流（三十一）
IO流之字符流 1. 字符流1.1 字符输入流【Reader】1.2 FileReader类构造方法读取字符数据 1.3 字符输出流【Writer】1.4 FileWriter类构造方法基本写出数据关闭和刷新写出其他数据 2. IO异常的处理JDK7前处理JDK7的处理JDK9的改进 3. 综合练习练习1：拷贝文件夹练习2&…...
监狱工具管理系统-监狱劳动工具管理系统
监狱劳动工具管理系统(智工具DW-S308)是依托互3D技术、云计算、大数据、RFID技术、数据库技术、AI、视频分析技术对工具进行统一管理、分析的信息化、智能化、规范化的系统。 当前各级监狱工器具管理更多的是借助于传统的人工管理方法和手段，数据的采集和录入一直以…...
蓄水池算法
题目： 假设有一组数据流元素有 N 个（事先不知道 N 具体值），我们希望选择 n 个样本（N > n），使用怎样的策略进行抽样可以使得数据流中每个元素被选择的概率恰为 n / N 结论： 创建大…...
作业 day4
完成父子进程通信...
)
erlang练习题(四)
题目一 传入列表 L1[K|]、L2[V|]、L3[{K,V}|_]，L1和L2一一对应，L1为键列表，L2为值列表，L3为随机kv列表， 将L1和L2对应位合并成KV列表L4，再将L3和L4相加，相同key的value相加 如：L…...
YoloV5实时推理最短的代码
YoloV5实时推理最简单代码 import cv2 import torch# 加载YOLOv5模型 model torch.hub.load(ultralytics/yolov5, yolov5s)# 使用CPU或GPU进行推理 device cuda if torch.cuda.is_available() else cpu model.to(device)# 打开摄像头（默认摄像头） cap…...
Tensorflow、Pytorch和Ray（张量，计算图）
1.深度学习框架（Tensorflow、Pytorch） 1.1由来 可以追溯到2016年，当年最著名的事件是alphago战胜人类围棋巅峰柯洁，在那之后，学界普遍认为人工智能已经可以在一些领域超过人类，未来也必将可以在更多领域超过…...
TinyWebServer学习笔记-让程序跑起来
目标：通过这个HTTP项目熟悉网络编程 系统：Ubuntu20.04 首先，学习的第一步就是先让程序跑起来，使用git将项目下载到虚拟机内： git clone https://github.com/qinguoyi/TinyWebServer.git 提前把MySQL数据库安装好&am…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
)
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
毫米波雷达基础理论（3D+4D）
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中，我们训练出的神经网络往往非常庞大（比如像 ResNet、YOLOv8、Vision Transformer），虽然精度很高，但“太重”了，运行起来很慢，占用内存大，不适合部署到手机、摄…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...