【学习笔记48】瀑布流代码的实现
2023-09-11 14:14:57 时间
一、效果分析
- 瀑布流: 也是分页的一种
- 首次打开页面, 展示8条数据(因为4条不够滚动)
- 随着页面的滚动, 加载新的数据, 拼接到老数据后边
二、逻辑分析
- 有一个渲染函数
- 当滚动到某一个距离的时候, 重新调用渲染函数
三、HTML和CSS代码
1、HTML代码
<div class="header">顶部导航</div>
<!-- 动态渲染页面 -->
<ul></ul>
<!-- 加载效果 -->
<div class="loading">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F42c725b3935a1ce3e32897b9995c1b6a2e921d335690-Ck6vZO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669994288&t=3e6b58c142daa3e4fef899cd7b6e9a0b"
alt="">
</div>
<div class="footer">底部导航</div>
2、CSS代码
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
width: 1200px;
margin: 0 auto;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
height: 120px;
color: #fff;
}
.footer {
height: 300px;
}
ul,
li {
list-style: none;
}
ul {
width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
justify-content: space-between;
padding-top: 10px;
}
li {
width: 290px;
border: 1px solid #333;
margin-bottom: 10px;
padding: 5px;
box-sizing: border-box;
}
li>img {
width: 278px;
display: block;
}
.loading {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
</style>
3、外部文件
<script src="./dm_list.js"></script>
4、JS代码的实现
// 获取标签对象
const oUl = document.querySelector('ul'); //页面渲染
const oDivLoading = document.querySelector('.loading'); //加载的对象
// 定义变量 存储数据
let currentNum = 1; //默认当前为第一页
let pageSize = 8; //默认每页展示8条数据
//每条总页数展示数据固定 所以总页数也是固定的
let totalNum = Math.ceil(list.length / pageSize);
let flag = true; //定义开关变量
// 封装函数 渲染页面
function myPage(){
// 从数组中截取数据
let newList = list.slice((currentNum-1)* pageSize, currentNum*pageSize);
// 根据截取的数据,渲染页面
oUl.innerHTML += newList.reduce(function(prev, item){
return prev + `<li>
<img src="${item.pic}" alt="">
<p>${item.name}</p>
<p>城市: ${item.city}</p>
<p>地址: ${item.address}</p>
<p>价格: ${item.price}</p>
<p>时间: ${item.showTime}</p>
</li>`
}, '')
}
// 调用函数 渲染页面
myPage()
// 监听页面滚动
window.addEventListener('scroll', function(){
// 如果或许没有数据 就不执行
if(currentNum == totalNum) return;
// 浏览器的可视区域 + 页面卷去的高度 > ul顶部的偏移量 + ul的窗口高度
// 浏览器的可视区域
let windowScroll = document.documentElement.clientHeight;
// 页面卷去的高度
let windowScrollTop = document.documentElement.scrollTop;
// ul顶部的偏移量
let ulTop = oUl.offsetTop;
// ul的窗口高度
let ulHeight = oUl.offsetHeight;
if(windowScroll + windowScrollTop < ulTop + ulHeight) return;
if(!flag) return;
// 开始请求 修改开关变量
flag = false;
// 打开loading图片
oDivLoading.style.display = 'flex';
// 请求新数据
setInterval(function(){
currentNum++;
// 渲染页面
myPage()
flag = true;
oDivLoading.style.display = 'none';
}, 3000)
})
相关文章
- 纯JS实现KeyboardNav(学习笔记)二
- Smarty3学习笔记
- 《从零开始学Swift》学习笔记(Day67)——Cocoa Touch设计模式及应用之MVC模式
- 《从零开始学Swift》学习笔记(Day 59)——代码排版
- 《从零开始学Swift》学习笔记(Day 57)——Swift编码规范之注释规范:文件注释、文档注释、代码注释、使用地标注释
- SPSS学习笔记之——Kaplan-Meier生存分析
- 全栈之路 -- 多数据库合并工作的复盘笔记
- AIX的Dump文件学习笔记(原创)
- 机器学习笔记:初识XGBoost (XGBoost分类器代码实验)
- Javascript 学习 笔记五
- Javascript 学习 笔记一
- 重构老系统遗留代码的一些方法学习笔记
- SpringBoot学习笔记(七)——综合示例BookStore图书管理系统
- 《编程之美》学习笔记——指挥CPU占用率
- NLP模型笔记2022-27:neo4j+py2neo知识图谱构建【添加城市经纬度】
- 从搭建到实战,看看这篇robotframework框架深度学习笔记
- C# 学习笔记(三)----- 设备监视 ( System.Management )
- MOSFET 和 IGBT 栅极驱动器电路的基本原理学习笔记(四)高侧非隔离栅极驱动
- RFSoC应用笔记 - RF数据转换器 -16- API使用指南之系统设置相关函数
- 雷达原理笔记之模糊与盲区
- Docker学习笔记02:Docker与虚拟化
- 强化学习笔记:Gym入门--从安装到第一个完整的代码示例
- java学习笔记——Map