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; }