当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/qq_62254095/article/details/133313738 2025/1/16 13:05:11

介绍

这是一个简单实现了类似博客瀑布流加载功能的页面，使用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…...

编程日记 2023/10/3 16:51:03

腾讯云南京服务器性能如何？南京服务器测速IP地址

腾讯云服务器南京地域怎么样？南京地域很不错，正好处于中间的位置，南方北方用户均可以选择，网络延迟更低速度更快，并且目前南京地域有活动，南京地域可用区可选南京一区、南京二区和南京三区，腾讯…...

编程日记 2023/10/3 16:50:01

MySQL和Oracle中，语法的不同点以及如何在xml中书写日期比较大小

众所周知mysql和oracle的语法有点相识，又有点不同。在MySQL和Oracle中，语法的不同点有以下几个方面： 数据类型：MySQL和Oracle支持的数据类型有所不同，比如MySQL支持的数据类型包括：整型、浮点型、字符型、…...

编程日记 2023/10/3 16:49:00

谈谈Redis分布式锁

目录一、回顾分布式锁 （一）理解分布式锁的定义 （二）分布式锁的约束条件 （三）分布式锁常见实现方式基于数据库的分布式锁基于缓存的分布式锁基于分布式一致性算法的分布式锁基于文件系统的分布…...

编程日记 2023/10/3 16:46:59

Redis的java客户端-RedisTemplate光速入门

一.创建springboot项目二.引入2个依赖 这个已经引入了，因为创建的时候勾选了<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><…...

编程日记 2023/10/3 16:44:56

获取美国站点的日降雨量的格点数据，并且可视化导入模块 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…...

编程日记 2023/10/3 16:42:53

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、结论…...

编程日记 2023/10/3 16:41:51

力扣-303.区域和检索-数组不可变

Idea 需计算数组nums在下标right 和 left-1 的前缀和，然后计算两个前缀和的差即可。需要注意的是，当left为0的时候，如果还是left-1则会发生数组访问越界错误。 AC Code class NumArray { public:vector<int> sum;NumArray(vector<…...

编程日记 2023/10/3 16:40:50

web：[极客大挑战 2019]LoveSQL

题目打开页面显示如下查看源代码，查到一个check.php，还是get传参尝试账号密码输入题目名为sql，用万能密码 1or 11# 或 admin or 11 给了一段乱码，也不是flag 查看字段数 /check.php?usernameadmin order by 3%23&pass…...

编程日记 2023/10/3 16:39:45

数据结构—快速排序（续）

引言：在上一篇中我们详细介绍了快速排序和改进，并给出了其中的一种实现方式-挖坑法但其实快速排序有多种实现方式，这篇文章再来介绍其中的另外两种-左右指针法和前后指针法。有了上一篇挖坑法的启示，下面的两种实现会容易许多。 …...

编程日记 2023/10/3 16:38:44

Snapdragon Profiler分析Android GPU

Snapdragon Profiler（骁龙分析器）是一款性能分析软件，在Windows、 Mac、和 Linux平台上都可以运行，主要是用来分析使用了高通骁龙处理器的Android设备。 Snapdragon Profiler通过USB连接这些Android设备，开发者可以用…...

编程日记 2023/10/3 16:36:42

Cannot download sources：IDEA源码无法下载

问题 Swagger的相关包，无法看到注释； 在class文件的页面，点击下载源码，源码下载不了，IDEA报下面的错误。报错 Cannot download sources Sources not found for: io.swagger.core.v3:swagger-annotations:2.2.9 解决…...

编程日记 2023/10/3 16:35:41

从零开始学习 Java：简单易懂的入门指南之IO字符流（三十一）

IO流之字符流 1. 字符流1.1 字符输入流【Reader】1.2 FileReader类构造方法读取字符数据 1.3 字符输出流【Writer】1.4 FileWriter类构造方法基本写出数据关闭和刷新写出其他数据 2. IO异常的处理JDK7前处理JDK7的处理JDK9的改进 3. 综合练习练习1：拷贝文件夹练习2&…...

编程日记 2023/10/3 16:31:38

监狱工具管理系统-监狱劳动工具管理系统

监狱劳动工具管理系统(智工具DW-S308)是依托互3D技术、云计算、大数据、RFID技术、数据库技术、AI、视频分析技术对工具进行统一管理、分析的信息化、智能化、规范化的系统。当前各级监狱工器具管理更多的是借助于传统的人工管理方法和手段，数据的采集和录入一直以…...

编程日记 2023/10/3 16:30:37

蓄水池算法

题目： 假设有一组数据流元素有 N 个（事先不知道 N 具体值），我们希望选择 n 个样本（N > n），使用怎样的策略进行抽样可以使得数据流中每个元素被选择的概率恰为 n / N 结论： 创建大…...

编程日记 2023/10/3 16:29:36

作业 day4

完成父子进程通信...

编程日记 2023/10/3 16:25:30

erlang练习题(四)

题目一传入列表 L1[K|]、L2[V|]、L3[{K,V}|_]，L1和L2一一对应，L1为键列表，L2为值列表，L3为随机kv列表， 将L1和L2对应位合并成KV列表L4，再将L3和L4相加，相同key的value相加如：L…...

编程日记 2023/10/3 16:23:28

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…...

编程日记 2023/10/3 16:21:09

Tensorflow、Pytorch和Ray（张量，计算图）

1.深度学习框架（Tensorflow、Pytorch） 1.1由来可以追溯到2016年，当年最著名的事件是alphago战胜人类围棋巅峰柯洁，在那之后，学界普遍认为人工智能已经可以在一些领域超过人类，未来也必将可以在更多领域超过…...

编程日记 2023/10/3 16:15:03

TinyWebServer学习笔记-让程序跑起来

目标：通过这个HTTP项目熟悉网络编程系统：Ubuntu20.04 首先，学习的第一步就是先让程序跑起来，使用git将项目下载到虚拟机内： git clone https://github.com/qinguoyi/TinyWebServer.git 提前把MySQL数据库安装好&am…...

编程日记 2023/10/3 16:11:59

_tkinter.TclError: no display name and no $DISPLAY environment variable 解决

启动kohya_ss时可能会发生错误： _tkinter.TclError: no display name and no $DISPLAY environment variable 解决办法： 1、apt-get install xvfb //安装xvfb // 启动虚拟显示器 2、Xvfb :99 -screen 0 1024x768x16 & export DISPLAY:99 ps aux…...

编程日记 2023/10/3 16:09:57

我出手了！

时光飞逝，程序员小灰这个微信公众号，已经运营整整7年时间了。在这7年里，小灰输出过各种各样的文章和视频，有讲编程技术的，有讲职业规划的，有讲互联网行业新闻的，也有讲自己个人生活的。不过&a…...

编程日记 2023/10/3 16:08:56

springboot的配置文件（properties和yml/yaml）

springboot的配置文件有两种格式分别是properties和yml/yaml 创建配置文件在创建springboot项目时候，会默认生成application.properties这种格式书写风格端口 application.propertis server.port8080 application.yml server:port: 8080 连接数据库 applica…...

编程日记 2023/10/3 16:07:55

SLAM面试笔记(7) — Linux面试题

目录问题1：Linux系统基本组件？ 问题2：Linux和Unix有什么区别？ 问题3：Linux下编译程序问题4：gcc基本格式和常用指令问题5：用什么命令查找内存和交换使用情况？ 问题6&#xf…...

编程日记 2023/10/3 16:06:54

QUIC不是TCP的替代品

QUIC取代了TCP成为HTTP3的基础传输协议，不是因为QUIC能够取代TCP的所有应用场景，而是因为QUIC更适合HTTP的请求/响应业务模型。原文: QUIC Is Not a TCP Replacement TCP新规范(RFC 9293)的发布是网络界的一件大事，值得围绕这一主题发表第二篇…...

编程日记 2023/10/3 16:04:53

计算机竞赛目标检测-行人车辆检测流量计数

文章目录前言1\. 目标检测概况1.1 什么是目标检测？1.2 发展阶段 2\. 行人检测2.1 行人检测简介2.2 行人检测技术难点2.3 行人检测实现效果2.4 关键代码-训练过程最后前言 🔥 优质竞赛项目系列，今天要分享的是行人车辆目标检测计数系统 …...

编程日记 2023/10/3 16:03:51

GPT系列模型解读：GPT-1

GPT系列 GPT（Generative Pre-trained Transformer）是一系列基于Transformer架构的预训练语言模型，由OpenAI开发。以下是GPT系列的主要模型： GPT：GPT-1是于2018年发布的第一个版本，它使用了12个Transformer…...

编程日记 2023/10/3 16:02:49

王杰国庆作业day3

父子进程对话 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <my_head.h> int main(int argc, const char *argv[]) {mkfifo("./fifo1",0664);mkfifo("./fifo2",0664);pid_t cpid fork();if(0 < cp…...

编程日记 2023/10/3 16:00:48

量子计算基础知识—Part1

1.什么是量子计算机？ 量子计算机是基于量子力学原理构建的机器，采用了一种新的方法来处理信息，从而使其具有超强的功能。量子计算机使用Qubits处理信息。 2. 什么是量子系统？ 一个量子系统指的是由量子力学规则描述和控制的物理…...

编程日记 2023/10/3 15:59:47

【PostgreSQL】【存储管理】表和元组的组织方式

外存管理负责处理数据库与外存介质(PostgreSQL8.4.1版本中只支持磁盘的管理操作)的交互过程。在PostgreSQL中，外存管理由SMGR(主要代码在smgr.c中)提供了对外存的统一接口。SMGR负责统管各种介质管理器，会根据上层的请求选择一个具体的介质管理器进行操作…...

编程日记 2023/10/3 15:58:46

网站登记查询/网站优化系统

软件名称：二维码识别精灵1.0 功能识别： 1.从摄像头识别二维码、条码 2.从文件读取二维码、条码 3.识别屏幕中的二维码、条码生成：文本生成二维码支持导出为图片特点 1.绿色软件，免安装，使用简单&#xff0c…...

编程日记 2025/1/16 12:42:08

游戏网站app/石家庄网站建设方案推广

解决方法如下： 1>、进入超级用户模式。也就是输入"su -",系统会让你输入超级用户密码，输入密码后就进入了超级用户模式。 2>、添加文件的写权限。也就是输入命令"chmod uw /etc/sudoers"。 3>、编辑/etc/sudoers文件…...

编程日记 2025/1/16 6:47:20

杭州学网站建设/seo怎么做?

整体目标在这一篇中，我们将使用Jenkins在此基础上构建一条完整的持续交付流水线，并且让团队不同成员能够基于该流水线展开基本的协作。开发： 持续提交代码并能够通过持续集成（CI）过程快速获取反馈，在通过C…...

编程日记 2025/1/16 0:49:49

微信开放平台是什么/常熟seo网站优化软件

1.请列举出在 JDK 中几个常用的设计模式？ 单例模式（Singleton pattern）用于 Runtime，Calendar 和其他的一些类中。工厂模式（Factory pattern）被用于各种不可变的类如 Boolean，像 Boolean.value…...

编程日记 2025/1/16 0:35:32

wordpress中footer函数/google搜索引擎入口镜像

内涵图转载于:https://www.cnblogs.com/jhcla/p/4390174.html...

编程日记 2025/1/15 23:50:42

商务网站建设与管理/百度长尾关键词挖掘工具

题目原题链接问题描述我们以[b,q,y][b,q,y][b,q,y]表示以bbb为首元素，qqq为公差，yyy为序列个数的序列，如[−1,2,4][-1,2,4][−1,2,4]表示序列[−1,1,3,5][-1,1,3,5][−1,1,3,5]。若存在两个序列AAA、BBB，它们的交集为序列CC…...

编程日记 2025/1/15 21:49:43

介绍

代码

index.html

style.css

script.js

补充

相关文章：