前端jQuery实现瀑布流

最新推荐文章于 2023-05-29 23:38:41 发布

weixin_30697239

最新推荐文章于 2023-05-29 23:38:41 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chongzixing/p/8961677.html

本文介绍了一种使用HTML、CSS和JavaScript实现瀑布流布局的方法。通过浮动盒子和绝对定位，结合图片加载动态调整位置，实现了自动填充多列的效果，并且加入了无限滚动加载的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

瀑布流是我们经常会见到的东西，一直刷新一直有，其实它实现起来是很简单的。具体代码如下

1、css代码

<style>
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                position: relative;
            }
            .container .box{
                float: left;
                padding:15px 0 0 15px;
            }
            .container .box .pic{
                border:1px solid #ccc;
                padding:10px;
                border-radius: 5px;
                box-shadow: 0 0 8px #ccc;
            }
            .container img{
                width:150px;
            }
        </style>

2、html代码

<div class="container">
            <div class="box">
                <div class="pic"><img src="images/1.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/2.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/3.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/4.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/5.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/6.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/7.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/8.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/9.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="pic"><img src="images/10.jpg" alt="" /></div>
            </div>
        </div>

3、javascript代码

<script>
            $(window).on("load",function(){
                waterfall();
                var dataInit = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
                $(window).scroll(function(){
                    if(checkScroll()){  //满足加载条件
                        $.each(dataInit.data,function(index,value){
//                            console.log(value["src"])
                            var $b = $("<div class='box'></div>");
                            var $pic = $("<div class='pic'></div>");
                            var $img = $("<img />");
                            $img.attr("src","images/" + value["src"]);
                            $img.appendTo($pic);
                            $pic.appendTo($b);
                            $b.appendTo($(".container"));
                        });
                    }
                    waterfall();
                });
                $(window).resize(function(){
                    waterfall();
                });
            });
            
            function waterfall(){
                var $box = $(".container>.box");
                var $bW = $box.first().outerWidth();//获取一个box的宽度
                var $vW = $(window).outerWidth();//获取浏览器宽度
                var $cols = parseInt($vW / $bW);//整个浏览器最多能排的列数
                var hArr = [];
                $(".container").css({"width":$bW * $cols,"margin":"0 auto"});
                $box.each(function(i,val){
    //                var $bH = $(this).outerHeight();//获取每一个box的高度
                    if(i < $cols){  //遍历的下标  小于  列数   第一行
    //                    hArr[i] = $(val).outerHeight();
                        hArr.push($(val).outerHeight());//把第一行所有的box的高度放到数组 hArr里
                        $(val).css({"position":"absolute","left":$bW * i,"top":0});
                    }else{
                        var $minH = Math.min.apply(null,hArr);//hArr数组里最小的高度
    //                    var $minIndex = $.inArray($minH,hArr);
    //                    $.inArray(元素,数组) 用来查找元素在整个数组中所处的位置  返回值是一个下标
                        var $minIndex = getIndex($minH);//最小高度所对应的下标
                        $(val).css({"position":"absolute","top":$minH,"left":$minIndex * $bW});
                        hArr[$minIndex] = hArr[$minIndex] + $(val).outerHeight();//更新数组中最小的那个高度
                    }
                });
                //获取高度最小的下标
                function getIndex(h){
                    for(var j = 0;j < hArr.length;j++){
                        if(hArr[j] == h){
                            return j;
                        }
                    }
                }
            }
            //检测加载条件
            function checkScroll(){
                var $sT = $(window).scrollTop();//滚动条向上卷去的距离
                var $vH = $(window).outerHeight();//浏览器的高度
                var $box = $(".container>.box");
                var $offT = $box.last().offset().top;//获取最后一个box距离文档的偏移量
                var $bH = $box.last().outerHeight();//获取最后一个box的高度
                if(($vH + $sT) > ($offT + $bH / 2)){
                    return true;
                }else{
                    return false;
                }
            }
            
    </script>