jquery之ajax方法之瀑布流案例

最新推荐文章于 2023-04-07 20:16:54 发布

天上人间一样愁

最新推荐文章于 2023-04-07 20:16:54 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/weixin_44392027/article/details/87924543

版权

ajax很重要！！！！！！！！！
刚接触感觉听得懂但做的时候就挺懵

话不多说上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果--规则的(局部刷新)</title>
    <style type="text/css">
        /* 公用样式 */
        body{padding:0;margin:0;}
        img{border:none;}
        a{text-decoration:none;color:#444;}
        a:hover{color:#999;}
        #title{width:600px;margin:20px auto;text-align:center;}
       
        /* wrap */
        #wrap{width:auto;height:auto;margin:0 auto;position:relative;}
        #wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
        #wrap .box .info{width:280px;height:310px;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
        #wrap .box .info .pic{width:260px;height:260px;margin:0 auto;padding-top:10px;}
        #wrap .box .info .pic img{width:260px;border-radius:3px;}
        #wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
    </style>
</head>
<body>
    <section id="title">
        <h2>js瀑布流效果特效代码</h2>
    </section>

    <div id="wrap">

        <div class="box">
        <div class="info">
            <div class="pic"><img src="images/1.jpg"></div>
            <div class="title"><a href="www.baidu" target="_blank"> 瀑布流效果</a></div>
        </div>
    </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/2.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/3.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/4.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/5.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/6.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/7.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.12.4.js" ></script>
    <!--<script src="js/index.js" type="text/javascript"></script>-->
    <script src="my.js" type="text/javascript"></script>
</body>
</html>

js部分

$(function () {
    var nuM = Math.floor($(document).width()/$(".box").outerWidth());
    console.log(nuM);
    $(window).scroll(function () {
        var winT = $(window).scrollTop() + $(window).height();
        var boxT = $(".box").last().offset().top + $(".box").outerHeight();
        // var Yv = $(".box").children().length % nuM;
        if (winT >= boxT){
            $.ajax({
                url:"./6.json",
                type:"get",
                dataType:"json",
                success:function (res) {
                    for (var i = 0 ; i < res.length ; i++){
                        var boxL = "<div class=\"box\">\n" +
                            "            <div class=\"info\">\n" +
                            "                <div class=\"pic\"><img src=\"images/"+res[i].src+"\"></div>\n" +
                            "                <div class=\"title\">瀑布流效果</div>\n" +
                            "            </div>\n" +
                            "        </div>"

                        $("#wrap").append(boxL)

                    }
                }
            })
        }
    })
})

添加的图片路径拼接的json文件是这样

在这里插入图片描述

本次有点敷衍，要靠自己悟了，告辞！

天上人间一样愁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery之ajax方法之瀑布流案例

ajax很重要！！！！！！！！！刚接触感觉听得懂但做的时候就挺懵话不多说上代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;瀑布流效果--规则的(局部刷新)&lt;/title&gt; &lt;style type=&quo
复制链接

扫一扫