利用JS實現簡單的瀑布流效果

時間 2019-12-18

原文原文鏈接

一.瀑布流之準備工做css

　　首先聲明下, 爲了方便演示和聯繫, 我使用的是本地圖片, 若是你們有須要的話能夠嘗試着寫下網絡的, 不過本地和遠端的大體是相同的. 那麼我就來簡單介紹下本地的瀑布流效果吧, 咱們要先準備好八九張圖片, 固然啦, 咱們實現的是瀑布流效果, 因此最好是高度不相同的, 這樣才能夠看出來效果, 對吧, 嘿嘿.html

二.代碼的準備工做算法

　　咱們打開開發工具, 先建個html工程, 在內部寫下以下代碼, 由於是準備工做, 因此剛開始寫的都是一些基礎性的東西, 就不一一解釋了, 直接上代碼:數組

<body> <div id="container"> <div class="box"> <div class="boximg"> <img src="img/1.jpeg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/2.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/3.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/4.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/5.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/6.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/7.gif"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/8.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/9.jpg"> </div> </div> </div> </body>

　　很明顯這段代碼中也就是幾個div標籤和幾個img標籤, 因此是很簡單的, 就很少說了, 下面咱們來佈置css樣式.網絡

三.css樣式佈置app

　　說句比較實在的話, 對於瀑布流而言, 由於我只是簡單的模擬下, 因此css樣式的定製, 我並無特別複雜的定製, 只是簡單的把邊框和容器(div)大小給定製了下, 還有一些顏色, 話很少說, 直接上代碼吧ide

/*使用通配符將內外邊距都設置爲零, 這樣看着好看*/
*{
    margin: 0px;
    padding: 0px;
}
/*將主容器的佈局方式設置爲相對佈局*/
#contianer{
    position: relative;
}

.box{
    padding: 5px;
    float: left;
}
/*將承載圖片的容器定製顏色及邊框大小和圓角*/
.boximg{
    padding: 5px;
    box-shadow: 0 0 5px #ccc;
    border: 1px solid #cccccc;
    border-radius: 5px;
}
/*定製圖片尺寸*/
.boximg img{
    width: 250px;
    height: auto;
}

　　代碼中註釋已經解釋的很清楚了, 就再也不過多的贅述了.工具

四.重點也是瀑布流的難點(JS的實現)佈局

　　你們對於瀑布流都不陌生吧, 它主要是頂寬的, 而後根據高度來進行佈局, 也就是說在第一行鋪滿後, 準備排布第二行的時候, 將第二行的第一種圖片放在第一行圖片高度最小處, 以後依次類推, 先簡單的上些代碼, 而後一一做解釋了, 正所謂有圖有真相, 哈哈!開發工具

　　這就是在未編寫js代碼時的效果圖, 那麼按道理來講下面的圖片應該放在第一行第二張圖片的位置下面, 應該充分利用空白資源, 那麼這要如何來實現呢, 接下來我就附上代碼來告訴你們了:

window.onload = function(){
    waterFlow("container", "box");
   
}
function waterFlow(parent, chirld){
    var wparent = document.getElementById(parent);//獲取父級div, 最外級容器
    var allArr = getAllChirld(wparent,chirld);//獲取到全部的class爲box的容器div
    var wscreenWidth = document.documentElement.clientWidth;//獲取屏幕寬度
    var wchirldWidth = wparent.getElementsByTagName("*");//獲取全部的標籤
    var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//這是一個Math算法, 目的是將小數轉變爲整數,
    // 從而能夠知道每行最多容納幾張圖片
    wparent.style.cssText = 'width:'+wchirldWidth[0].offsetWidth*num+'px;margin:0 auto';//固定每行擺放個數 和上下左右邊距
    //得到每行的最小高度
    getMinHeightOfCols(allArr, num);
}
function getAllChirld(parent,classname){
    //獲取全部的標籤
    var wchirld = parent.getElementsByTagName("*");
    //建立數組
    var chirldArr = [];
    //遍歷wchirld, 將其中className等於classname(傳進來的參數)相同的標籤放入數組chirldArr中
    for(var i = 0; i<wchirld.length; i++){ if(wchirld[i].className==classname){ //由於是位push因此沒放進去一個, 都是在數組的最後一個 chirldArr.push(wchirld[i]); } } //返回該數組 return chirldArr; } function getMinHeightOfCols(chirdArr, num){ //建立數組, 用來盛放每一行的高度 var onlyOneColsArr = []; for(var i = 0; i<chirdArr.length; i++){ if(i<num){ //num爲傳進來的參數, 即爲每行放圖片的張數, 此步驟的目的是爲了將第一行每張圖片的高度遍歷出來存放如新數組 onlyOneColsArr[i]=chirdArr[i].offsetHeight; } else { //當大於每行存放的圖片個數時進入該方法, Math.min.apply這個方法是爲了獲得數組中的最小值 var minHeightOfCols = Math.min.apply(null, onlyOneColsArr); //此方法的目的是爲了獲得最小高度圖片的下表, 也就是在每行的第幾張, 具體方法見下面 var minHeightOfindex = getminIndex(onlyOneColsArr, minHeightOfCols); //定義佈局方式爲絕對佈局 chirdArr[i].style.position = "absolute"; //獲得下一行圖片應放的高度 chirdArr[i].style.top = minHeightOfCols + "px"; //獲得下一行圖片應放於那個位置 chirdArr[i].style.left = chirdArr[minHeightOfindex].offsetLeft + "px"; //將兩張圖片高度相加獲得一個新的高度用來進行下一次的計算 onlyOneColsArr[minHeightOfindex] += chirdArr[i].offsetHeight; } } } //此方法是爲了進行最小高度下標的肯定 function getminIndex(onlyOneColsArr, min){ //遍歷傳進來的高度數組 for(var i in onlyOneColsArr){ //若是高度等於最小高度, 返回i即爲該圖片下標 if(onlyOneColsArr[i] == min){ return i; } } }

　　註釋已經很清楚了, 若是還有不瞭解不知道的地方, 歡迎評論留言, 下面就讓咱們來看下效果圖吧, 嘿嘿

五.瀑布流之模擬網絡加載

　　寫到這裏不少人確定認爲已經差很少結束了, 可是我來拓展點小知識吧, 那就是如何實現相似於網絡上的無限加載, 下面附上代碼吧, 因爲時間有點緊張就不作詳細的介紹了, 有不懂得歡迎細問:

window.onload = function(){
    waterFlow("container", "box");
    var dataInt={'data':[{'src':'1.jpeg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},
        {'src':'7.gif'},{'src':'8.jpg'},{'src':'9.jpg'}]};

    window.onscroll=function(){
        if(checkscrollside()){
            var oParent = document.getElementById('container');// 父級對象
            for(var i=0;i<dataInt.data.length;i++){ var oPin=document.createElement('div'); //添加 元素節點 oPin.className='box'; //添加 類名 name屬性 oParent.appendChild(oPin); //添加 子節點 var oBox=document.createElement('div'); oBox.className='boximg'; oPin.appendChild(oBox); var oImg=document.createElement('img'); oImg.src='./img/'+dataInt.data[i].src; oBox.appendChild(oImg); } waterFlow('container','box'); }; } }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。