JavaScript||瀑布流实例

最新推荐文章于 2022-04-10 16:27:52 发布

月亮不休我不眠

最新推荐文章于 2022-04-10 16:27:52 发布

阅读量218

点赞数

分类专栏： WEB 文章标签： html javascript ajax jquery

本文链接：https://blog.csdn.net/qq_43543920/article/details/106087625

版权

WEB 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前言

基于前面的瀑布流知识背景，今天就来用具体实例玩一下（其实也是Ajax的巩固）。
最终效果浏览：
在这里插入图片描述
看过我前面文章的朋友会发现，这里的数据和前面一篇的数据一样，但是当时为了美观，我是把图片的宽高写死的，文字数量也控制在一定范围。这导致部分图片被拉伸，而且部分文字显示不完全。学了瀑布流之后，前面的问题就可以迎刃而解了。

前期准备

1，GitHub下载相关文件
主要是下载三个JS文件(前面的文章都分享过相关链接）：jQuery插件、模板引擎插件和瀑布流插件。
在这里插入图片描述
2，导入Ajax接口函数
前面已经对Ajax发送请求的代码进行了封装，因此可以直接引入文件。这里再放一份源代码【ajax.js】：

 /*
 *    属性值：
 *        date    url    type     succuss
 */

 function getPostUp(object){
    var xhr = new XMLHttpRequest();
     
    if(object.type == "get" && object.date){
        object.url = object.url + "?" + object.date;
     }
     xhr.open(object.type, object.url);
     if(object.type == "post" && object.date){
         xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
     }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            
            var type = xhr.getResponseHeader('content-type');
            if(type.indexOf("json") != -1){
               object.succuss(JSON.parse(xhr.responseText));
            }else if(type.indexOf("xml") != -1){
                object.succuss(xhr.responseXML);
            }else{
                object.succuss(xhr.responseText);
            }
        }
    }
    xhr.send(object.date);
 }

3，导入数据
这里我还是用前面文章的假数据，这里就不再放数据代码了。需要的朋友可以在我前面的文章获取。这是链接：https://blog.csdn.net/qq_43543920/article/details/105887621
在这里插入图片描述

页面布局

1，页面布局
我最终想实现的效果是，初始化页面后，最初只有应该按钮，点击该按钮则像服务器发送请求。服务器每次返回一定的数据，直到数据加载完毕，将按钮变为不可点击。
所有，整个页面只需要一个点击按钮和一个装数据item 的大盒子。代码如下【index.html(部分)】：

<body>
    <div id="bigbox" class="grid"></div>
    <button>加载更多</button>
</body>

当然，对于每个返回的数据item,不可能直接将数据放在浏览器中。而是将其插入模板内，再显示在浏览器中。故我们要定义好模板原型。
下面是代码【index.html(部分)】：

<script type="text/html" id="templ">
    <div id="bigbox">
        <div id="itembox">
            <div id="top">
                <img src={{cimg}} />
            </div>
            <div id="bottom">
                <h3>{{name}}</h3>
                <p>{{well}}</p>
            </div>  
        </div>
    </div>
</script>

2，css添加样式
这个没什么好说的，css层叠样式表的作用就是让页面更加美观可视化。下面直接放代码【mycss.css】：

*{
    padding: 0;
    margin: 0;
}
#itembox{
    margin-top: 40px;
    margin-left: 40px;
    width: 200px;
    height: auto;
    border:1px solid black;
}
#top img{
    width: 100%;
}

#bottom h3{
    padding-left: 8px;
    color: #515151;
    line-height: 26px;
}

#bottom p{
    color: #515151;
    font-size: 12px;
    line-height: 26px;
    padding: 8px;
}
button{
    display: block;
    margin: 20px auto;
    width: 200px;
    height: 40px;
    border-radius: 8px;
    background-color: pink;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

功能实现

1，步骤
1）给按钮添加一个点击事件
2）Ajax异步发送请求
3）获取返回的数据
4）修改按钮值和样式
5）将返回的相关数据插入模板中
6）利用瀑布流插件将数据显示
2，问题
1）引入jQuery插件和瀑布流插件时，应注意先引入jQuery插件再引入瀑布流插件（因为瀑布流插件是作为jQuery的一个功能来实现的）
在这里插入图片描述
2）由于要多次加载数据，故引用瀑布流插件不能单纯用上篇文章的代码，不然就会这样：

$('.grid').masonry();

在这里插入图片描述
去GitHub查看了相关使用文档后，了解到一个这样改：
（具体代码见【index.html】）

【index.html(完整）】：

<!DOCTYPE html>
<html>
    <head>
        <title>瀑布式布局</title>
        <meta charset="utf-8" />
        
        <!-- 1，导入样式 -->
        <link rel="stylesheet" href="css/mycss.css" type="text/css" >
    </head>
    <body>
        <div id="bigbox" class="grid"></div>
        <button>加载更多</button>
        
        <!-- 2,导入js文件 -->
        <script src="js/ajax.js"></script>
        <script src="js/template-web.js"></script>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/masonry.pkgd.min.js"></script>

        <!-- 3，定义模板 -->
        <script type="text/html" id="templ">
            <div id="bigbox">
                <div id="itembox">
                    <div id="top">
                        <img src={{cimg}} />
                    </div>
                    <div id="bottom">
                        <h3>{{name}}</h3>
                        <p>{{well}}</p>
                    </div>  
                </div>
            </div>
        </script>
    </body>

    <!-- 4，发送请求获取数据并显示 -->
    <script>
        //初始化index值
        var index = 0;

        document.querySelector("button").onclick = function(){
            //修改按钮值
            this.innerText = "";
            var timer = setInterval(function a(){
                if(document.querySelector("button").innerText == "......"){
                    document.querySelector("button").innerText = "";
                }
                document.querySelector("button").innerText += ".";
            }, 100);

            //获取数据
            getPostUp({
                // date    url    type     succuss
                date : "index="+ index,
                url : "addMore.php",
                type : "get",
                succuss(d){
                    //清空定时器
                    clearInterval(timer);

                    totle总量  success是否成功获取数据（1/0）   index成功获取后的页面数据值   items本次获取的多个数据  sjs本次随机添加数据数量
                    if(d.success == 1){
                        //修改index值
                        index = d.index;

                        //修改按钮值
                        var btn = document.querySelector('button');
                        var fz = Math.ceil(d.index / d.sjs);
                        var fm = Math.ceil(d.totle / d.sjs);
                        if(fz == fm){
                            //数据加载完毕让按钮不再可以点击
                            btn.innerHTML = "数据加载完毕！！";
                            btn.disabled = true;
                            btn.style.backgroundColor = "#8a8a8a";
                        }else{
                            // console.log(fz+"/"+fm)
                            //数据未加载完毕时
                            btn.innerHTML = fz + " / " + fm;
                        }

                        //将数据显示到页面
                        var html = "";
                        for(var i = 0; i < d.items.length; i++){
                            var dated = {
                                name : d.items[i].name,
                                cimg : d.items[i].cimg,
                                well : d.items[i].well
                            }

                            var res = template("templ", dated);
                            console.log(res);

                           html +=res;

                        }
                        var $dom = $(html);
                        $('.grid').masonry()
                            .append( $dom )
                            .masonry( 'appended', $dom )
                            .masonry();
                    }
                }
            });
        }
    </script>
</html>

PHP服务器页面

【myphp.php】：

<?php

    //totle总量  success是否成功获取数据（1/0）   index成功获取后的页面数据值   items本次获取的多个数据  sjs本次随机添加数据数量

    //声明返回的是json 
    header('content-type:application/json; charset=utf-8');
    
    $index = $_GET["index"];

    $datefile = file_get_contents('date.json');

    $date = json_decode($datefile, true);

    if($index < count($date)){
        $sec = 1;
        $sjs = 5;
        while(($index + $sjs) > count($date)){
            $sjs = $sjs - 1;

        }
    }else{
        $sec = 0;
    }

    echo '{';
    echo '"success" : '.$sec;
    echo ',"index" : '.($index+$sjs);
    echo ',"totle" : '.count($date);
    echo ',"sjs" : '.$sjs;
    echo ',"items" : [';
    for($i = 0;$i < $sjs; $i++){
        echo json_encode($date[$index+$i]);
        if($i != $sjs-1){
            echo ',';
        }
    }
    echo ']}';

    sleep(1);
?>

最终效果图

基于js的瀑布流效果

完整源代码

链接：https://download.csdn.net/download/qq_43543920/12414123

月亮不休我不眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript||瀑布流实例

前言基于前面的瀑布流知识背景，今天就来用具体实例玩一下（其实也是Ajax的巩固）。最终效果浏览：看过我前面文章的朋友会发现，这里的数据和前面一篇的数据一样，但是当时为了美观，我是把图片的宽高写死的，文字数量也控制在一定范围。这导致部分图片被拉伸，而且部分文字显示不完全。学了瀑布流之后，前面的问题就可以迎刃而解了。前期准备1，GitHub下载相关文件主要是下载三个JS文件(前面的文章都分享过相关链接）：jQuery插件、模板引擎插件和瀑布流插件。2，导入Ajax接口函数前面已经对Ajax发
复制链接

扫一扫