瀑布流是我們經常會見到的東西，一直刷新一直有，其實它實現起來是很簡單的。具體代碼如下

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>

4、註意一定要引入本地的jQuery代碼

例如：<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

前端jQuery實現瀑布流