导航：首页 > 开发技术 >

JavaScript瀑布流怎么实现

发表于：2025-01-17 作者：千家信息网编辑

千家信息网最后更新 2025年01月17日，这篇文章主要介绍"JavaScript瀑布流怎么实现"，在日常操作中，相信很多人在JavaScript瀑布流怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Jav

千家信息网最后更新 2025年01月17日JavaScript瀑布流怎么实现

这篇文章主要介绍"JavaScript瀑布流怎么实现"，在日常操作中，相信很多人在JavaScript瀑布流怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"JavaScript瀑布流怎么实现"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

瀑布流的核心

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

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

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

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

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

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

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

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

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

3, 函数的节流

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

只需要触发执行第一次函数程序的调用

原理:

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

执行判断

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

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

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

案例

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

代码

                          Document

ajax代码

// 封装一个promise程序执行 ajax请求// 参数1    请求的url地址// 参数2    请求的方式 // 参数3    携带的参数怇function myPromiseAjax( url , type = 'get' , data = '' ){    // 创建一个 promise 对象     const p = new Promise(function( fulfilled , rejected ){        // 执行异步ajax请求        const xhr = new XMLHttpRequest() ;         if( type.toLowerCase() === 'get' ){            // get请求方式            xhr.open( 'get' , `${url}?${data}` );            xhr.send();         }else{            // post请求方式            xhr.open( 'post' , url );            xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');            xhr.send(data);        }         // 接收 请求结果        xhr.onreadystatechange = function(){              // 当 ajax状态码是 4 时 判断 http状态码                      if( xhr.readyState === 4 ) {                 // 如果 http状态码 是 200 - 299                 if( /^2\d{2}$/.test( xhr.status ) ){                    // 请求成功                    fulfilled( xhr.response );                   }else if( /^(4|5)\d{2}$/.test( xhr.status )  ){                    // 请求失败                    rejected( xhr.statusText );                 }            }        }     });     // return 返回这个promise对象    return p;}