JavaScript瀑布流怎么实现

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

瀑布流的核心

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

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

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

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

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

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

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

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

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

3, 函数的节流

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

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

原理:

• 定义一个 开关变量

• 变量储存原始数据

执行判断

• 如果 变量 存储原始数据 变量赋值其他数据

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

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

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

案例

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

代码

                                    
        美食菜谱        美妆造型        家居生活        人物明星    
         
           

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

注意点

（1）服务器加载网络图片的meta标签

（2）瀑布流执行的判断依据

（3）函数的节流

（4）服务器配置更改

运行结果

到此，关于"JavaScript瀑布流怎么实现"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！