javascript實現瀑布流自適應遇到的問題及解決方案

javascript實現瀑布流自適應遇到的問題及解決方案_javascript技巧

WBOY

發布： 2016-05-16 16:17:26

原創

1160 人瀏覽過

這幾天看了Amy老師的用javascript實現瀑布流，我跟著把程式碼敲出來。發現這樣寫只能第一次載入時適應螢幕，以後改變視窗大小就不能做到自適應了。

於是我想到了用window.onresize來使得瀑布流函數從新加載來達到目的，

複製程式碼程式碼如下:

window.onload=function(){

    //瀑布流函數

    waterfall('content','box');

    //模擬資料載入

var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src": "04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}

    //當螢幕大小改變時從新執行瀑布流函數 達到從新適應的作用

    window.onresize=function(){

//      waterfall('content','box');

       setTimeout(function() {waterfall('content','box');}, 200);

    }

    window.onscroll=function(){

        if(checkScroll()){

            var oparent = document.getElementById('content');

            //將已被燻染的資料加入html中

            for(var i=0;i
                var obox = document.createElement("div");

                obox.className = "box";

                oparent.appendChild(obox);

                var opic = document.createElement("div");

                opic.className = "pic";

                obox.appendChild(opic);

                var oImg = document.createElement("img");

                oImg.src="img/" dataInt.data[i].src;

                opic.appendChild(oImg);

            }

                waterfall('content','box');

        }

    }

}

當螢幕縮小時是可以的，但從縮小的放大就出現了BUG

看沒看到後面幾列的頂部回不來了，
於是我開啟開發工具看是怎麼回事，

第3 4 5個div中不應該有style,是因為縮小的時候給他添加上去的，而放大了他沒有清除所以保留下來了就會出現這個樣子於是：我在瀑布流函數裡加了句aBox[i].style.cssText ='';使得每次進來都清空style

複製程式碼程式碼如下:

function waterfall(parent,box){

    //將content下所有class box取出來

    var aParent = document.getElementById(parent);

    var aBox = getBclass(aParent,box);

    //取得盒子的寬度

    var aBoxW = aBox[0].offsetWidth;

    //用瀏覽器的可是寬度除以box寬度 得到列數

    var cols = Math.floor(document.documentElement.clientWidth/aBoxW);

    //設定 content的寬度 和居中

    aParent.style.cssText = 'width:' aBoxW*cols 'px;height:auto;position: relative; margin:0 auto;padding-right:15px';

    //建立每一列的高度陣列

    var hArr=[];

    for(var i=0; i
        aBox[i].style.cssText ='';

        if(i
            hArr.push(aBox[i].offsetHeight); 

        }else{

            var minH = Math.min.apply(null,hArr);

            var index = getMinIndex(hArr,minH);  //找出高最矮的 索引值

            //console.log(aBoxW);

            aBox[i].style.position = 'absolute';

            aBox[i].style.top = minH 'px';

            aBox[i].style.left = aBoxW*index 'px';

            hArr[index] =aBox[i].offsetHeight;

        }

    }

}

這樣就解決了縮小後回不來的BUG，可以正常自適應了

最後我把整個的javascript 貼出來

複製程式碼程式碼如下:

window.onload=function(){

    //瀑布流函數

    waterfall('content','box');

    //模擬資料載入

var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src": "04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}

    //當螢幕大小改變時從新執行瀑布流函數 達到從新適應的作用

    window.onresize=function(){

//      waterfall('content','box');

       setTimeout(function() {waterfall('content','box');}, 200);

    }

    window.onscroll=function(){

        if(checkScroll()){

            var oparent = document.getElementById('content');

            //將已被燻染的資料加入html中

            for(var i=0;i
                var obox = document.createElement("div");

                obox.className = "box";

                oparent.appendChild(obox);

                var opic = document.createElement("div");

                opic.className = "pic";

                obox.appendChild(opic);

                var oImg = document.createElement("img");

                oImg.src="img/" dataInt.data[i].src;

                opic.appendChild(oImg);

            }

                waterfall('content','box');

        }

    }

}

function waterfall(parent,box){

    //將content下所有class box取出來

    var aParent = document.getElementById(parent);

    var aBox = getBclass(aParent,box);

    //取得盒子的寬度

    var aBoxW = aBox[0].offsetWidth;

    //用瀏覽器的可是寬度除以box寬度 得到列數

    var cols = Math.floor(document.documentElement.clientWidth/aBoxW);

    //設定 content的寬度 和居中

    aParent.style.cssText = 'width:' aBoxW*cols 'px;height:auto;position: relative; margin:0 auto;padding-right:15px';

    //建立每一列的高度陣列

    var hArr=[];

    for(var i=0; i
        aBox[i].style.cssText ='';

        if(i
            hArr.push(aBox[i].offsetHeight); 

        }else{

            var minH = Math.min.apply(null,hArr);

            var index = getMinIndex(hArr,minH);  //找出高最矮的 索引值

            //console.log(aBoxW);

            aBox[i].style.position = 'absolute';

            aBox[i].style.top = minH 'px';

            aBox[i].style.left = aBoxW*index 'px';

            hArr[index] =aBox[i].offsetHeight;

        }

    }

}

//依class取得到元素

function getBclass(parent,className){

    var boxarr = new Array(); //用來儲存取得到的class
        //console.log(parent.prototype);

    allElement=parent.getElementsByTagName('*');

    for(var i=0;i
        if(allElement[i].className == className){

            boxarr.push(allElement[i]);

        }

    }

    return boxarr;

}

//找出高最矮的 索引值

function getMinIndex(arr,value){

    for(var i in arr){

        if (arr[i]==value){

            return i;

        }

    }

}

//建立一個偵測輪輪滑動是否成立的函數  回傳真假

function checkScroll(){

    var oparent = document.getElementById("content");

    var oBox = getBclass(oparent,'box');

    var lastoBoxTop = oBox[oBox.length-1].offsetTop Math.floor(oBox[oBox.length-1].offsetHeight/2);

    //console.log(lastoBoxTop);

    var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

    var height = document.body.clientHeight||document.documentElement.clientHeight;

    //console.log(scrollTop);

    return(lastoBoxTop
}

css檔貼出來

複製程式碼程式碼如下:

*{margin: 0;padding: 0;}

body{background-color: #eee;}

.content{ 

    position: relative;

    }

.box{

    padding: 15px 0 0 15px;

    float: left;

}

.pic{

    padding: 10px;

    border: 1px solid #ccc;

    box-shadow: 0 0 5px #CCCCCC;

    border-radius: 5px;

    background: #fff;

}

.pic img{

    width: 220px;

    height: auto;

    border: 1px solid #eee;

}