JS Realizes Waterfall Flow Effect
Effect picture
HTML part and css style
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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;
}
.loadding {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
</style>
</head>
<body>
<div class="header">顶部导航</div>
<ul>
</ul>
<div class="loadding">
<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>
<!-- 引入外部数据文件 -->
<script src="./dm_list.js"></script>
JavaScript section
<script>
// 0. 获取元素
var oUl = document.querySelector('ul') // ul标签
var myloadding = document.querySelector('.loadding') // loadding 效果
// 0. 准备变量
var currentNum = 1 // 默认当前为 第 1 页
var pageSize = 8 // 默认每页展示数据 8 条(因为4条高度不够,不能滚动)
var totalNum = Math.ceil(list.length / pageSize) // 因为每页展示数据固定, 所以总页数也是固定
var flag = true // 当作开关初始值
// 1. 准备渲染函数
function myFn() {
// 1.1 从数组截取数据
var newList = list.slice((currentNum - 1) * pageSize, currentNum * pageSize)
// 1.2 展示到页面
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>`
}, '')
}
// 2. 首次打开页面时, 直接调用渲染函数
myFn()
// 3. 监听页面的滚动事件
window.onscroll = function () {
// 3.1 如果后续没有新数据, 那么不执行
if (currentNum == totalNum) return
/**
* 浏览器的可视区域高度 + 页面卷去的高度 > ul顶部偏移量 + ul 的窗口高度
* 3.2.1 找到这四个数据
*/
var windowScroll = document.documentElement.clientHeight // 浏览器的可视区域高度
var windowScrollTop = document.documentElement.scrollTop // 页面卷去的高度
var ulTop = oUl.offsetTop // ul顶部偏移量
var ulHeight = oUl.offsetHeight // ul 的窗口高度
// 3.2.2 书写判断
if (windowScroll + windowScrollTop < ulTop + ulHeight) return
// 3.2.3 开关
if (!flag) return
// 3.2.4 开始请求, 修改开关的值
flag = false
// 3.2.5 打开 loading 图片
myloadding.style.display = 'flex'
// 3.3 请求新数据
setTimeout(function () {
currentNum++
myFn()
flag = true
myloadding.style.display = 'none'
}, 2000)
}
</script>