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）服务器配置更改（这里不会的详见上一篇博客）

 运行结果