懶加載瀑布流

今天簡單寫下瀑布流特效

1,先放8張圖片看看

<body>
<div id="container">
    <div class="box"><div class="box-img"><img src="img/pbl/1.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/2.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/3.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/4.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/5.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/6.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/7.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/8.jpg" alt=""/></div></div>
</div>
</body>

2,簡單佈局下

<style>
            *{
                padding:0;
                margin:0;
            }
            img{
                vertical-align: middle;
            }
            #container{
                position: relative;
            }
            #container .box{
                float:left;
                padding-right:10px;
                padding-top:10px;
            }
            #container .box .box-img{
                padding:5px;
                border:1px solid #ccc;
                border-radius:5px;
                background-color: #eee;
            }
        </style>

樣式中沒有設置container的寬度和居中,因爲本次想做自適應瀏覽器寬度的效果(即每行圖片的個數是動態的,自適應瀏覽器寬度的)

3,由於沒有後臺數據,圖片數據通過文件導入了

<script src="data/pbl_JSON.js"></script>
文件是var pbl=[{src:"img/pbl/1.jpg"},{src:"img/pbl/2.jpg"},{src:"img/pbl/3.jpg"}...]的形式!
若有後臺數據可用ajax方法請求,js實現的代碼差異不會很大

4,採用原生js實現效果!

如下遍歷元素採用了2種方法均能實現,後續會再總結其他的方法添加進來!

<script>
    var container=document.getElementById("container");
    var n=-1;//記錄加載的次數
    //事件監聽,待文件,圖片等加載完成後運行,防止出現用es6方法先調用後定義未定義而報錯!!
    window.addEventListener("load",function(){
        imgLocation("box");
        //判斷如果滾動距離+瀏覽器高度>最後一張圖片的offsetTop,則進行加載圖片
        this.addEventListener("scroll",function(){
            isScroll=false;
            //實現有限的數據加載
//            if(checkAdd("box")){
//                n++;
//                for(var i=0;i<8;i++){//每次追加8張圖片
//                        if(8+n*8+i>=pbl.length)return false;//當數據提供的圖片全部加載完成之後跳出來!
//                        var div1=document.createElement("div");
//                        div1.className="box";
//                        container.appendChild(div1);
//                        var div2=document.createElement("div");
//                        div2.className="box-img";
//                        div1.appendChild(div2);
//                        var img=new Image();
//                        img.src=pbl[8+n*8+i].src;
//                        div2.appendChild(img);
//                        }
//                //執行加載
//                imgLocation("box");
//            }
            //實現無限數據加載
            if(checkAdd("box")){
                pbl.forEach(function(item){
                    var div1=document.createElement("div");
                        div1.className="box";
                        container.appendChild(div1);
                    var div2=document.createElement("div");
                        div2.className="box-img";
                        div1.appendChild(div2);
                    var img=new Image();
                        img.src=item.src;
                        div2.appendChild(img);
                })
                //執行加載
                imgLocation("box");
            }

        },false);

    },false);//false是冒泡階段執行,true是捕獲階段執行

    //1 定義獲取子元素集合的方法
    function getChild(child){
        var tagsAll=container.getElementsByTagName("*");
        var childArr=[];
        //for循環遍歷
        for(var i=0;i<tagsAll.length;i++){
            if(tagsAll[i].className==child){
                childArr.push(tagsAll[i]);
            }
        }

        //forEach遍歷數組
//        [...tagsAll].forEach(function(item){//...tagsAll是將集合編程的那個的元素,ES6擴展運算符
//                if(item.className==child){
//                    childArr.push(item);
//                }
//                })
//        console.log(childArr);
        return childArr;
    }

    //2 (完成佈局)把圖片居中並隨着瀏覽器的寬度改變,一排顯示的圖片數量也改變,並且container居中!
    function imgLocation(child){
        var box=getChild(child);
        var imgW=box[0].offsetWidth;
        //var num=Math.floor(document.documentElement.clientWidth/imgW);//使用Math.floor運算符向下取整
        var num=~~(document.documentElement.clientWidth/imgW);//位運算~~,表示去掉小數部分
        container.style.cssText="width:"+imgW*num+"px;margin:0 auto";//使container居中
    //3 計算每列的最小高度和對應的索引值
        var heightArr=[];
        var minIndex=0;
        [...box].forEach(function(item,index){
            if(index<num){
                heightArr.push(item.offsetHeight);
            }else{
                //獲得最小高度:minHeight (用apply方法或者...[]方法)
                // var minHeight=Math.min.apply(null,heightArr);
                  var minHeight=Math.min(...heightArr);

                //獲得最小高度的索引值:minIndex
                heightArr.forEach(function(item,index){
                    if(item==minHeight){
                        minIndex=index;
                    }
                })

    //4  將索引值在num後面的圖片放在最小高度的後面
                item.style.cssText="position:absolute;top:"+minHeight+"px;left:"+box[minIndex].offsetLeft+"px";

    //5  之後更新heightArr[minIndex]的值,使後面的圖片不斷進行高度比較!
                heightArr[minIndex]+=item.offsetHeight;
                console.log(heightArr);
            }
        })
    }
    //最後  判斷鼠標滾動事件進行加載
    function checkAdd(child){
        var box=getChild(child);
        var lastBox=box[box.length-1];
        var lastTop=lastBox.offsetTop;
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var clientH=document.documentElement.clientHeight||document.body.clientHeight;
        if(scrollTop+clientH>lastTop){
            console.log(1);
            return true;
        }
    }

</script>

若有問題請提出,謝謝~



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章