首页 > 作文

JavaScript瀑布流的实现你学会了吗

更新时间:2023-04-05 01:34:25 阅读：评论：0

瀑布流的核心

1, 根据 ajax请求的响应体结果动态渲染生成页面

请求地址请求方式参数键名都是后端程序定义的

前端只能根据需求定义携带的具体的参数数据

响应体数据是后端程序返回的数据结果

只能获取数据结果不能修改数据结果

可以根据响应体数据结果动态渲染生成页面内容

可以使用三元运算符给标签定义属性等

2, 瀑布流再次发起请求的判断依据

上卷高度 + 视窗窗口高度 + 预留高度 > 最矮ul占位高度

3, 函数的节流

同时触发多次执行相同的函数程序

只需要触发执行第一次函数大王具足虫能吃吗程序的调用

原理:

定义一个开关变量变量储存原始数据

执行判断

如果变量存储原始数据变量赋值其他数据如果变量存储其他数据执行 return 终止之后程序的执行

当函数的所有程序都触发执行结束

变量赋值原始值可以再次触发新的函数

案例

这里用某糖网站作为案例，调用某糖网站的接口，仿一个简单的网页。

代码

<!doctype html><html lang="en"><head><!-- 服务器加载网络图片的meta标签 --><meta name="referrer" content="never"><meta chart="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;}.btn {width: 300px;margin: 50px auto;}ul,ol,li {list-style: none;}img {display: block;width: 100%;height: 100%;}a,a:hover,a:active {text-decoration: none;}.box {width: 1200px;margin: 0 auto;}.box::after {display: block;content: "";clear: both;}.box ul {width: 260px;float: left;margin: 0 20px;}.box ul li {width: 100%;display: flex;flex-direction: column;border: 2px solid #000;margin: 0 0 15px 0;}.box ul li .imgbox {width: 100%;}.box ul li .contentbox {width: 100%;padding: 15px;display: flex;flex-direction: column;justify-content: space-between;}.box ul li .contentbox p {display: flex;justify-content: flex-start;align-items: center;}.box ul li .contentbox p:nth-child(1) {margin: 10px 0;}.box ul li .contentbox p:nth-child(2) {margin: 10px 0;}.box ul li .contentbox p:nth-child(2) span {margin: 0 10px 0 0;}.box ul li .contentbox p:nth-child(2) span i {margin: 0 10px 0 0;}.box ul li .contentbox p:nth-child(3) span:nth-child(1) {display: block;width: 40px;height: 40px;border-radius: 50%;overflow: hidden;margin: 0 10px 0 0;}</style></head><body><div class="btn"><button>美食菜谱</button><button>美妆造型</button><button>家居生活</button><button>人物明星</button></div><!-- div中的内容是 动态生成的 --><div class="box"></div><script src="../../ajax.js"></script><script>// 定义全局变量 存储相关的数据信息let start;let time;let keyword;// 获取父级div标签const obox = d毓的意思ocument.querylector('.box');// 定义全局变量 存储 要使用的数据let ouls;let flag = true;// 获取 所有的button按钮const obtns = document.querylectorall('button');// 循环遍历 给 所有的button标签 添加 点击事件obtns.foreach(item => {item.addeventlistener('click', function () {// 默认第一次显示的是从索引下标是0开始的第一条数据start = 0;// 获取关键词keyword = this.innerhtml;// 向 div标签中写入 4个ul空标签obox.innerhtml = "<ul></ul><ul></ul><ul></ul><ul></ul>";// 获取 所有的ul标签对象 ouls = obox.querylectorall('ul');// 调用执行 async await 和 promi执行的 ajax请求tpage();})})// 定义 页面滚动监听事件window.addeventlistener('scroll', function () {//考科二 获取 占位数据数值// 页面上卷高度let scrolltop = document.documentelement.scrolltop;// 视窗窗口占位高度let winheight = document.documentelement.clientheight;// 设定预留高度let height = 500;// 获取最矮ul标签对象// 循环结束 minul 变量中 存储 最矮ul标签对象let minul = ouls[0];for (let i = 0 + 1; i <= ouls.length - 1; i++) {// 如果 minul 变量中 存储的 ul标签 高度 大于 ouls[i]循环遍历的ul标签的占位 // 变量minul 中 存储 ouls[i] 循环遍历的ul标签 if (minul.offtheight > ouls[i].offtheight) {minul = ouls[i];}}// 执行判断 if (scrolltop + winheight + height > minul.offtheight) {// 再次发起请求 动态渲染生成新的页面内容/*因为 scroll事件 鼠标滚动一次 多次触发 scroll事件也就是 鼠标滚动一次 多次触发执行 tpage() 函数 也就是 鼠标滚动一次 多次触发执行 新的 ajax请求 因为 ajax请求是异步程序 结果就是 多次触发的ajax请求 执行的是相同的请求参数获取的 响应体结果 是 相同的响应体结果实际项目中 多次请求 只需要执行 第一次请求*/// 判断变量储存的数据 防止多次调用函数if (flag) {flag = fal;} el {return;}// 再次调用函数 发起新的请求 动态渲染生成新的页面tpage();}})// 使用 async 定义 异步请求函数程序async function tpage() {// 获取 时间对象 和 时间戳const t = new date();time = t.gettime();// 发起请求时 根据需求 设定 ajax请求携带的参数数据// respon中存储的是响应体数据 const respon = json.par(await mypromiajax('/dt', 'get', `include_fields=top_comments%2cis_root%2csource_link%2citem%2cbuyable%2croot_id%2cstatus%2clike_count%2cnder%2calbum%2creply_count&filter_id=${keyword}&start=${start}&_=${time}`));console.log(respon);// 给下一次 请求 赋值起始数据的索引下标start = respon.data.next_start;// 获取 24条数据的数组const arr = respon.data.object_list;// 循环遍历 数组中的24个单元 arr.foreach(item => {// 根据数组单元的数据 生成 li标签let str = `<li><div class="imgbox" style="height:${260 * item.photo.height / item.photo.width}px"><img src="${item.photo.path}" alt=""></div><div class="contentbox"><p>${item.msg}</p><p><span style="${item.like_count === 0 ? 'display:none' : ''}"><i>点赞</i>${item.like_count}</span><span style="${item.favorite_count === 0 ? 'display:none' : ''}"><i>收藏</i>${item.favorite_count}</span></p><p><span><img src="${item.nder.avatar}" alt=""></span><span>${item.nder.urname} <br> 发布到 <a href="javascript:;">${item.album.name}</a></span></p></div></li>`;// 每生成一个li 就要拼接写入最矮的ul标签中// 获取最矮的ul标签 let minul = ouls[0];for (let i = 0 + 1; i <= ouls.length - 1; i++) {// 如果 minul 变量中 存储的 ul标签 高度 大于 ouls[i]循环遍历的ul标签的占位 // 变量minul 中 存储 ouls[i] 循环遍历的ul标签 if (minul.offtheight > ouls[i].offtheight) {minul = ouls[i];}}// 循环结束minul 中 存储的是 最矮的ul标签对象// 向 最矮的ul标签中 拼接写入 li标签minul.innerhtml += str;})// 当请求执行结束 当新的页面内容生成完毕 // 可以再次发起新的请求 给 变量赋值原始数据flag = true;}</script></body></html>

ajax代码

// 封装一个promi程序执行 ajax请求// 参数1    请求的url地址// 参数2    请求的方式 // 参数3    携带的参数怇function mypromiajax( url , type = 'get' , data = '' ){// 创建一个 promi 对象 const p = new promi(function( fulfilled , rejected ){// 执行异步ajax请求const xhr = new xmlhttprequest() ;if( type.tolowerca() === 'get' ){// get请求方式xhr.open( 'get' , `${url}?${data}` );xhr.nd();}el{// post请求方式xhr.open( 'post' , url );xhr.trequestheader('content-type' , 'application/x-www-form-urlencoded');xhr.nd(data);}// 接收 请求结果xhr.onreadystatechange = function(){  // 当 ajax状态码是 4 时 判断 http状态码          if( xhr.readystate === 4 ) {// 如果 h食物变质ttp状态码 是 200 - 299 if( /^2\d{2}$/.test( xhr.status ) ){// 请求成功fulfilled( xhr.respon );  }el if( /^(4|5)\d{2}$/.test( xhr.status )  ){// 请求失败rejected( xhr.stat8 15是什么节日ustext );}}}});// return 返回这个promi对象return p;}