Waterfall flow code and ideas

/* 1. Get data: encapsulate it into a function, to achieve the get data action 2. Render data: Display the data obtained from the background to the page, according to the column display, loop the array given by the background, and then splice each piece of data, add to the minimum length of a column, here encapsulates a minimum column method, the element set into an array, and then sort according to the clientHeight, so as to find the lowest Li.3. To implement rolling loading of more data, load new data when the bottom of the minimum length of the li leaks, loadMore in order to prevent multiple requests at a time, with a flag judgment, only when the flag isfalseWhen the request starts, the flag is set totrueRender successful, let's set flag again tofalse. 4. LoadImg loadAll does not load images before they appear in the visible window, and only loads images when they leak out half 5. Preloading, when the image is to be displayed as a real image with the default image first, then using JS to create a temporary image. Make the temporary image request the remote real image, and when the request is successful assign the real image address to the page's IMG tag. 6. FadeIn: realize the image's gradient, and optimize the performance of opacity addition operation on img by using timer: each chart corresponds to a div, there will be bugs, so that all ICONS correspond to a div to control the content in div */let body = document.getElementsByClassName('body')[0],
    olis = document.querySelectorAll('.body li'),
    oImg = body.getElementsByTagName('img')
let flag = false; When should the new data be renderedtrue?? // Change the flag as new data is requestedletn = 0; // Get datafunction getData() {
    flag = true;
    n++;
    let xhr = new XMLHttpRequest();
    xhr.open('get'.'./data.json'.true);
    xhr.onreadystatechange = function () {
        if(XHR. ReadyState = = 4 && / 200 | 304 /. The test (XHR. Status)) {/ / request is successful console. The log (JSON. Parse (XHR. Response))letParse (xhr.response) render(data)// Get new data render page flag =false; // loadAll() after rendering new data; } } xhr.send(); } getData();functionRender (data) {//data background array // loop array concatenation string concatenation string into the pagelet 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 is a newly concatenated fast. The thing we need to decide is which li to place this fast in // // olis[index % 5]. //let temp = getMinLi(); // find the shortest li // // add the item to the lowest 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(); // find the shortest lilet div = document.createElement('div')
        div.className = 'img_box'; div.innerHTML = str; temp.appendChild(div); })} // Find the shortest lifunction getMinLi() {// find the shortest lilet ary = [...olis].sort((a, b) => {
        return a.clientHeight - b.clientHeight;
    })
    returnary[0]; } // The third scroll loads new data window.onscroll =function () {
    loadMore()
    loadAll()
}

function loadMore() {// The shortest li leaks the bottom and loads the new dataif (n >= 3) return; // Slide the scroll wheel to load the image twice, if not set infinite loadinglet li = this.getMinLi();
    if(this. Utils. Offset (li) t + li. ClientHeight < = document. DocumentElement. ScrollTop + enclosing utils. WinH () h) {/ / need new data after rendering the page Then load new dataif(! flag) { console.log(666) getData(); }}}function loadAll() {
    [...oImg].forEach(item => {
        loadImg(item)
    })
}


function loadImg(ele) {
    if (ele.myLoad) return/ / lazy loadingif(utils. Offset (ele) t + ele. ClientHeight / 2 < = document. DocumentElement. ScrollTop + utils. WinH () h) {/ / half leaked imageslet realSrc = ele.getAttribute('realSrc');
        // ele.src = realSrc;
        lettemp = new Image(); temp.src = realSrc; // Let the temporary image request the real image address temp.onload =functionSRC = realSrc; () {el.src = realSrc; ele.myLoad =true; FadeIn (ele)} temp = null; }} // Preloadfunction 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; }, } // https://github.com/wdy15632628358/zhengshike2/blob/master/19-10/week4/day1/%E7%80%91%E5%B8%83%E6%B5%81.zipCopy the code