瀑布流效果特效

最新推荐文章于 2021-05-10 14:51:08 发布
卟良亻
最新推荐文章于 2021-05-10 14:51:08 发布
阅读量252
点赞数 1
本文链接：https://blog.csdn.net/weixin_42595284/article/details/82120191
版权
<!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:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
        #wrap .box .info .pic{width:260px;height:auto;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="img/1.jpg"></div>
            <div class="title"><a href="#" target="_blank"> 瀑布流效果</a></div>
        </div>
    </div>

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

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

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

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

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

        <div class="box">
            <div class="info">
                <div class="pic"><img src="img/7.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>
    </div>
    <script src="jquery-3.3.1.min.js" ></script>
    <script>
        var wrap = $('#wrap');
        var boxs = $('.box');
        //每一行box个数
        var boxW = boxs.eq(0).outerWidth();
        var num = Math.floor(document.documentElement.clientWidth/boxW);
        //设置外层宽度
        wrap.width(boxW * num);
        setTimeout(function(){
            pbl(boxs,num);
        }, 500);

        $(window).scroll(function () {
            var lastBox = $('.box').last().offset().top+$('.box').height();
            var winH = $(window).height()+$(window).scrollTop();
            console.log(lastBox);
            console.log(winH);
            console.log($('.box').last().offset().top)
            if (lastBox - winH < 100) {

                $.ajax({
                    url:"6.json",
                    type:"GET",
                    dataType:"json",
                    async:true,
                    success:function(data){
                        console.log(data);
                        for(i in data){
                            //创建新的box

                            var newHtml = $('<div class="box">\
                                                <div class="info">\
                                                    <div class="pic">\
                                                        <img src="img/'+data[i].src+'"/>\
                                                    </div>\
                                                    <div class="title">\
                                                        <a hrf="">'+data[i].title+'</a>\
                                                    </div>\
                                                </div>\
                                            </div>');
                            $("#wrap").append(newHtml);
                        }
                        boxs  = $(".box");
                        pbl(boxs,num);
                    }
                });
            }
        });
         //3.循环出所有的box并按照瀑布流排列
        function pbl(boxs,num){
            var everyH = [];//定义一个数组存储每一列的高度
            boxs.each(function(index){
                if(index<num){
                    //将每一列的起始高度存储，(列数-1)之前的box元素的高度赋给相应的每一列
                    everyH[index] = $(this).outerHeight();
                }else{
                    //下标大于等于列数的 box元素，获得最小列的高度，添加到该列，并将该列的高度改变
                    var minH = Math.min.apply(null,everyH);//获得最小的列的高度
                    //inArray()返回数组中指定元素的索引值
                    var minIndex = $.inArray(minH,everyH); //获得最小列的索引

                    $(this).css({position:"absolute",top:minH+"px",left:boxW*minIndex+"px"});
                    everyH[minIndex] += $(this).outerHeight();
                }
            });
        }

    </script>
</body>
</html>