<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body > div {
width: 1200px;
margin: 0 auto;
background-color: skyblue;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
font-size: 60px;
}
.footer {
height: 600px;
}
ul, li {
list-style: none;
}
ul {
width: 1200px;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
width: 295px;
border: 1px solid #333;
height: 510px;
margin-bottom: 10px;
box-sizing: border-box;
padding: 8px;
}
img {
width: 280px;
height: 350px;
display: block;
}
.info {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.loading {
height: 400px;
background-color: #fff;
margin: 5px auto;
display: none;
}
.loading.active {
display: block;
}
.loading > img {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<div class="header">网页头部</div>
<ul>
<!-- JS 渲染 -->
</ul>
<div class="loading">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648872144&t=43a735f21dee9b39b2ca15ef2d3725fc" alt="">
</div>
<div class="footer">网页底部</div>
<script src="./dm_list.js"></script>
<script>
/*
案例 - 瀑布流
需求:
+ 在一个合适的时机, current++, 从新渲染
问题: 什么是合适的时机 ?
+ ul 盒子的底边进入页面的时候就是合适的时机
问题: 如何判断 ul 的底边进入页面了 ?
+ 浏览器卷去的高度 + 可视窗口高度 >= 盒子的上方偏移量 + 盒子的高度
*/
// 0. 获取元素
var listBox = document.querySelector('ul')
var loadingBox = document.querySelector('.loading')
// 1. 基础页面渲染
var current = 1
var pagesize = 8
var total = Math.ceil(list.length / pagesize)
// 开关
var flag = true
// 1-2. 准备渲染的函数
bindHtml()
function bindHtml() {
// 1-2-1. 截取数组
var bindList = list.slice((current - 1) * pagesize, current * pagesize)
// 1-2-2. 渲染页面
// 因为是 瀑布流, 需要的是叠加
// 因为你写了 +=, 不会覆盖原先的任何内容, 保证你的 listBox 一开始不要有内容
listBox.innerHTML += bindList.reduce(function (prev, item) {
return prev + `
<li>
<img src="${ item.pic }" alt="">
<div class="info">
<p>${ item.name }</p>
<p>地址: ${ item.address }</p>
<p>城市: ${ item.city }</p>
<p>价格: ${ item.price }</p>
<p>演出时间: ${ item.showTime }</p>
</div>
</li>
`
}, '')
}
// 2. 准备加载下一页
window.onscroll = function () {
// 2-1. 判断什么情况不加载
if (current >= total) return
// 2-2. 判断没有达到指定位置的时候, 不加载
var window_height = document.documentElement.clientHeight
var scroll_top = document.documentElement.scrollTop || document.body.scrollTop
var ul_top = listBox.offsetTop
var ul_height = listBox.offsetHeight
if (window_height + scroll_top < ul_top + ul_height) return
// 判断开关
if (!flag) return
// 2-3. 让 loading 出现
loadingBox.classList.add('active')
// 代码能执行到这里, 说明开关是开启的, 我们需要关闭
flag = false
// 2-4. 使用 setTimeout 定时器模拟网络加载过程
setTimeout(function () {
// 实现加载的代码
current++
bindHtml()
// 让 loading 效果消失
loadingBox.classList.remove('active')
// 把开关打开
flag = true
}, Math.floor(Math.random() * (5000 - 2000 + 1) + 2000))
}
</script>
</body>
</html>
利用渲染制作瀑布流
最新推荐文章于 2024-09-11 20:31:47 发布