瀑布流
效果：模拟向后端请求数据 在向上滚动时，向数据库中请求数据 将请求的数据拼接在原有数据后面
html 结构
<!-- html结构-->
<div class="header">网页头部</div>
<ul>
<!-- JS渲染 -->
<!-- <li>
<img src="" alt="">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</li> -->
</ul>
<p>
<span>正在加载...</span>
</p>
<div class="footer">网页底部</div>
<script src="./dm_list.js"></script>
css 样式
/* 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;
}
p{
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
display: none;
}
</style>
js 实现
<script>
// 获取元素
var oUl = document.querySelector('ul'); // 获取ul元素
var oP = document.querySelector('p'); // 获取p元素 => 正在加载...
// 定义变量
var kaiShi = 1; // 定义开始索引
var jieShu = 8; // 定义一次展示的数据
var yeShu = Math.ceil(list.length / jieShu); // 数据请求次数 => 需要滚动多少次
var flag = true; // 定义开关变量
// 封装 渲染函数
function fun(){
var newList = list.slice((kaiShi - 1) * jieShu , kaiShi * jieShu); // 截取到kaiShi * jieShu前
// 开始索引 [(kaiShi - 1) * jieShu] 结束索引[kaiShi * jieShu];
oUl.innerHTML += newList.reduce(function(prev,item){
return prev += `
<li>
<img src="${item.pic}" >
<p>${item.name}</p>
<p>城市:\u0020${item.city}</p>
<p>地址:\u0020${item.address}</p>
<p>价格:\u0020${item.price}</p>
<p>时间:\u0020${item.showTime}</p>
</li>
`
},'')
// console.log(newList); // 查看newList 是否能被截取到
}
// 第一次打开页面 直接调用函数渲染
fun();
// 添加滚动事件 => 当页面滚动到一个高度 请求数据
window.onscroll = function(){
// 浏览器的可视区域高度 + 页面卷去的高度 > ul顶部偏移量 + ul 的窗口高度
var clientHeight = document.documentElement.clientHeight; // 浏览器可视高度
var scrollTop = document.documentElement.scrollTop; // 页面卷去高度
var offTOP = oUl.offsetTop; // ul顶部偏移量
var offHight = oUl.offsetHeight; // ul窗口高度
if(clientHeight + scrollTop < offTOP + offHight) return; // 如果 浏览器的可视区域高度 + 页面卷去的高度 > ul顶部偏移量 + ul 的窗口高度 啥也不执行
if(!flag) return; // 如果flag为false 啥也不执行
// 请求数据
// 开关变量 flag
flag = false; // 数据请求中再次滚动 不会请求数据 当前数据请求完以后再滚动才会请求数据 (滚动一次只能请求一次 不能重复请求)
oP.style.display = 'block'; // 加载显示
//定义定时器
setInterval(function(){
kaiShi++; // 请求一次 开始索引+1*jieShu
fun(); // 调用渲染函数
flag = true; // 数据请求后打开开关变量 再次滚动可以执行
op.style.display = 'none'; // 执行结束 加载隐藏
},10000); // 滚动页面10秒后执行
if(kaiShi == yeShu){ // 当数据请求到最后一条时 就不再显示 加载
flag = false;
oP.style.display = 'none';
}
}
</script>
数据 (list)
var list = [{"id":625153951363,"name":"2020西太湖国际音乐节","showTime":"2020.09.19-09.20","price":"199-399","city":"常州","address":"常州西太湖中国花卉博览景区北门","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg"},{"id":624506842658,"name":"2020舟山东海音乐节","showTime":"2020.09.04-09.06","price":"200-680","city":"舟山","address":"舟山市朱家尖南沙景区沙滩","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg"},{"id":623216520608,"name":"中国•磐安 2020氧气山水音乐节","showTime":"2020.08.22 周六 16:30","price":"280","city":"金华","address":"金华磐安花溪风景区","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg"},{"id":624345993344,"name":"2020“一生中最爱”七夕演唱会","showTime":"2020.08.25 周二 19:30","price":"180-580","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg"},{"id":624170605605,"name":"东海五渔节之敢潮音乐节","showTime":"2020.08.22 周六 18:00","price":"198-228","city":"舟山","address":"舟山嵊泗五龙乡听海广场(原黄沙村船厂)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01eV5pR32GdSFxJUb0v_!!2251059038.jpg"},{"id":624000957041,"name":"【聚光灯】周四周日爆笑脱口秀剧场","showTime":"2020.08.13-09.27","price":"99","city":"上海","address":"健力士醇黑坊","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01s9Jlz32GdSFv79hIO_!!0-item_pic.jpg"},{"id":623838540974,"name":"2020真世界摇滚演出","showTime":"2020.08.29 周六 20:30","price":"120","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01HWbQXk2GdSFxARpRD_!!0-item_pic.jpg"},{"id":624699066028,"name":"开心麻花首部悬疑惊悚喜剧《醉后赢家》","showTime":"2020.08.25-09.06","price":"80-1080","city":"北京","address":"地质礼堂剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01Vv1mQO2GdSFvnmIDs_!!2251059038.png"},{"id":625219995330,"name":"开心麻花经典爆笑舞台剧《乌龙山伯爵》","showTime":"2020.08.25-08.30","price":"80-1080","city":"北京","address":"北京展览馆剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01znXuKj2GdSG6ACMMb_!!0-item_pic.jpg"},{"id":623454281510,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.12 周三","price":"80-1280","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN013YAyeY2GdSFnXwgnQ_!!0-item_pic.jpg"},{"id":625314963280,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.15-08.21","price":"100-1180","city":"上海","address":"虹桥艺术中心","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01Qb8wyX2GdSG30DCl4_!!0-item_pic.jpg"},{"id":622815888793,"name":"开心麻花上海首部原创爆笑舞台剧《皇帝的新娘》","showTime":"2020.08.12-08.16","price":"80-1180","city":"上海","address":"上戏实验剧院","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01uie4Gf2GdSFlp1Rvv_!!0-item_pic.jpg"},{"id":624443634831,"name":"孟京辉戏剧作品《我爱xxx》","showTime":"2020.08.13-08.16","price":"100-380","city":"北京","address":"蜂巢剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01LwdJRL2GdSFtDPtRL_!!2251059038.jpg"},{"id":624095704875,"name":"【8月8日-16日场次周年特惠低至四折】太阳马戏X绮幻之境 - 8月","showTime":"2020.08.12-08.30","price":"360-3460","city":"杭州","address":"杭州新天地太阳剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01iyWOwU2GdSG2iMBsM_!!0-item_pic.jpg"},{"id":624163106935,"name":"高达5公里定向挑战赛","showTime":"2020.09.26 周六","price":"108-388","city":"上海","address":"世纪公园","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01y2n1PI2GdSFtLmEtu_!!2251059038.jpg"},{"id":622064265074,"name":"2020 FORMULA1 中国大奖赛（礼包&福袋）","showTime":"2020.07.04-12.31","price":"120-270","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ZHrnGM2GdSFbZjdUV_!!2251059038.jpg"},{"id":623662985515,"name":"2020ChinaJoy电竞赛事荟萃","showTime":"2020.07.31-10.30","price":"0","city":"北京","address":"请到大麦APP和优酷APP观看","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01RpgBQ82GdSFoMD7h8_!!0-item_pic.jpg"},{"id":618307700815,"name":"2020 FORMULA1 中国大奖赛（服装）","showTime":"2020.05.19-12.31","price":"248-620","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01scI6Ly2GdSFEYDh7P_!!0-item_pic.jpg"},{"id":613334933912,"name":"2020 FORMULA1 中国大奖赛（周边衍生品）","showTime":"2020.03.11-12.31","price":"35-160","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ZusbUY2GdSENL0iIN_!!2251059038.jpg"},{"id":613323173822,"name":"2020 FORMULA1 中国大奖赛（帽品）","showTime":"2020.03.11-12.31","price":"200-335","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01azreXu2GdSF9rIkGV_!!2251059038.jpg"},{"id":613940057617,"name":"加速北京跳伞俱乐部高空跳伞体验","showTime":"2020.08.05-08.31","price":"2980","city":"北京","address":"北京市平谷区马坊镇通航产业基地","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ns9MZj2GdSFIp2udB_!!2251059038.png"},{"id":624453755826,"name":"《你是演奏家2 · 超级金贝鼓》","showTime":"2020.08.21-08.23","price":"180-380","city":"上海","address":"美琪大戏院","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN016u70M62GdSFrTL5GP_!!0-item_pic.jpg"},{"id":624211844323,"name":"正版授权·大型儿童实景舞台剧《奥特曼宇宙之光》","showTime":"2020.09.05 周六","price":"180-580","city":"海口","address":"海南省歌舞剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ybwkiZ2GdSFy9894v_!!2251059038.jpg"},{"id":624672730925,"name":"全国正版授权大型互动式儿童舞台剧 海底小纵队2—火山大冒险","showTime":"2020.11.15 周日","price":"80-480","city":"上海","address":"黄浦剧场-中剧场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN01mfDv5t2GdSFwbhzvt_!!0-item_pic.jpg"},{"id":624868314578,"name":"大船文化·加拿大原版音乐启蒙全场互动亲子剧《你是演奏家2·超级金贝鼓》","showTime":"2020.09.06 周日","price":"180-380","city":"天津","address":"津湾大剧院大剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01l16ZUE2GdSFzGWSPx_!!2251059038.png"},{"id":624450522367,"name":"大船文化·法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.09.06 周日","price":"120-280","city":"南京","address":"江苏大剧院--综艺厅","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01FMizHi2GdSG0AINxP_!!2-item_pic.png"},{"id":623125350409,"name":"大船文化 法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.08.27-08.30","price":"80-480","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01CiAVft2GdSFpIawAw_!!2251059038.jpg"},{"id":623975390263,"name":"正版授权大型实景舞台剧《奥特曼：宇宙之光》（杭州站）","showTime":"2020.12.13 周日","price":"68-480","city":"杭州","address":"杭州剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01fUBSCY2GdSFsbnPPh_!!2251059038.jpg"}]
