瀑布流代碼實現及思路

思路：/*
        1.獲取數據：封裝成一個函數，去實現獲取數據的動做
        2.渲染數據：把從後臺獲取到的數據展現到頁面上，按照列展現的，循環後臺給的數組，
          而後把每一條數據拼接好，添加到長度最小的一列，這裏封裝了一個最小列的方法，
          把元素集合轉成數組，而後按照clientHeight 進行排序，由此找到最低那個li.
        3.實現滾動加載更多數據，當長度最小的那個li的底部漏出時就加載新的數據，loadmore
          爲了，防止一次性請求屢次，多了一個flag判斷，只有當flag爲false時，纔去執行新數據請求加載
          當請求開始時  flag設置爲true 渲染成功，咱們把flag再設置爲false。
        4.實現圖片懶加載的操做，loadImg loadAll當圖片尚未出如今可視窗口的時候不去加載圖片，只有當圖片漏出來一半時再去加載
        5.預加載 ，當圖片要在展現成真正的圖片時 先用默認圖展現，而後在利用js建立一個臨時的圖片。
          讓這個臨時的圖片去 請求遠程 真實的圖片， 當請求成功後再把真實圖片地址賦給頁面的那個img標籤。 
        6.fadeIn:實現圖片的漸現，利用定時器對img進行opacity的累加操做 
    
        性能優化：每個圖表對應一個div，會有但bug，優化成 全部圖標對應一個div 控制div中的內容
    
        */
        
     let body = document.getElementsByClassName('body')[0],
    olis = document.querySelectorAll('.body li'),
    oImg = body.getElementsByTagName('img')
let flag = false;//表明新數據渲染完成 何時 flag應該是個true ？？//新數據一請求，就把 flag 變 
let n = 0;

//獲取數據
function getData() {
    flag = true;
    n++;
    let xhr = new XMLHttpRequest();
    xhr.open('get', './data.json', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && /200|304/.test(xhr.status)) {//請求成功
            console.log(JSON.parse(xhr.response))
            let data = JSON.parse(xhr.response)
            render(data)//獲取新數據 渲染頁面
            flag = false;//新數據渲染完成後的操做
            loadAll();
        }
    }
    xhr.send();
}
getData();


function render(data) {
    //data 後臺給的數組
    //循環數組 拼接字符串 拼接好的字符串放進頁面
    let str = '';
    data.forEach(item => {
        let { pic, author, desc, height } = item
        // str = `
        //     <div class="img_box">
        //         <img realSrc="${pic}" realSrc="./img/1.jpg" alt="" style='height:${height}px'>
        //         <P class="desc">${desc}</P>
        //         <p class="author">${author}</p> 
        //     </div>`
        // //str是新拼接出來的一個快，咱們須要決定的事 這個快放在哪一個li中
        // // olis[index % 5].innerHTML += str;
        // let temp = getMinLi();//找出最短li
        // //把要增長的這一項放到最低的li中
        // temp.innerHTML += str;
        str = `
            <img realSrc="${pic}" realSrc="./img/1.jpg" alt="" style='height:${height}px'>
            <P class="desc">${desc}</P>
             <p class="author">${author}</p> 
            `
        let temp = getMinLi();//找出最短li
        let div = document.createElement('div')
        div.className = 'img_box';
        div.innerHTML = str;
        temp.appendChild(div);
    })
}

//找最短的li
function getMinLi() {
    //找最短的li
    let ary = [...olis].sort((a, b) => {
        return a.clientHeight - b.clientHeight;
    })
    return ary[0];
}

//第三部 滾動加載新數據

window.onscroll = function () {
    loadMore()
    loadAll()
}

function loadMore() {
    //最短的那個li漏出底部的時候 就加載新數據
    if (n >= 3) return;//滑動滾輪加載兩次圖片，若是不設置就無限加載
    let li = this.getMinLi();
    if (this.utils.offset(li).t + li.clientHeight <= document.documentElement.scrollTop + this.utils.winH().h) {
        //須要等新數據渲染到頁面後 再去加載新數據
        if (!flag) {
            console.log(666)
            getData();
        }

    }
}
function loadAll() {
    [...oImg].forEach(item => {
        loadImg(item)
    })
}


function loadImg(ele) {
    if (ele.myLoad) return
    //懶加載
    if (utils.offset(ele).t + ele.clientHeight / 2 <= document.documentElement.scrollTop + utils.winH().h) {
        //圖片漏出來一半
        let realSrc = ele.getAttribute('realSrc');
        // ele.src = realSrc;
        let temp = new Image();
        temp.src = realSrc;//讓臨時圖片去請求真實的圖片地址
        temp.onload = function () {
            //圖片從遠程拿到了本地
            ele.src = realSrc;
            ele.myLoad = true;//加載過以後就再也不加載
            fadeIn(ele)
        }
        temp = null;
    }
}


//預加載
function fadeIn(ele) {
    ele.style.opacity = 0;
    let n = 0;
    ele.timer = setInterval(() => {
        n += 0.01;
        if (n >= 1) {
            n = 1;
            clearInterval(ele.timer)
        }
        ele.style.opacity = n;
    }, 10)
}   

//具體代碼以下
https://github.com/wdy15632628358/zhengshike2/blob/master/19-10/week4/day1/%E7%80%91%E5%B8%83%E6%B5%81.zip
複製代碼