实现瀑布流（懒加载）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body {
            background-color: #eee;
        }
        .wrapper {
            width: 980px;
            margin: auto;
        }
        .wrapper li {
            float: left;
           
            width: 25%;
        }
        .wrapper li div {
            margin: 10px;
            background-color: #fff;
            padding: 10px;
        }
        .wrapper li .item img {
            width: 100%;
        }
    </style>
</head>
<body>
    <!--
        1. 封装简单ajax函数
        2. 实现瀑布流效果
     -->
     <ul class="wrapper">
        <li>
            <div class="item">
                <img src="./image/1.jpg" alt="">
                <p>这是一张图片</p>
            </div>
        </li>
        <li>
            <div class="item">
                <img src="./image/2.jpg" alt="">
                <p>这是一张图片</p>
            </div>
        </li>
        <li>
            <div class="item">
                <img src="./image/3.jpg" alt="">
                <p>这是一张图片</p>
            </div>
        </li>
        <li>
            <div class="item">
                <img src="./image/4.jpg" alt="">
                <p>这是一张图片</p>
            </div>
        </li>
     </ul>
     <script src="./index.js"></script>
     <script>
        function getData() {
            ajax('./data.json', 'GET', '', function (res) {
                render(res);
                flag = false;
            }, true);
        }
         //  拿到最短的列
         function getMinLi() {
            var oLi = document.getElementsByTagName('li');
            var minIndex = 0;
            var minHeight = oLi[0].offsetHeight;
            for (var i = 0; i < oLi.length; i++) {
                if (oLi[i].offsetHeight < minHeight) {
                    minIndex = i;
                    minHeight = oLi[i].offsetHeight;
                }
            }
            return {
                minIndex,
                minHeight
            }
         }
        //  渲染页面
         function render(res) {
            var oLi = document.getElementsByTagName('li');
            var imgWidth = oLi[0].getElementsByClassName('item')[0].offsetWidth;
            for (var i = 0; i < res.length; i++) {
                var item = document.createElement('div');
                item.className = 'item';
                var oImg = new Image();
                oImg.src = res[i].img;
                // oImg.width / oImg.height = res[i].width / res[i].height 
                oImg.height = imgWidth * res[i].height / res[i].width;
                var oP = document.createElement('p');
                oP.innerText = res[i].desc;
                item.appendChild(oImg);
                item.appendChild(oP);
                var index = getMinLi().minIndex;
                oLi[index].appendChild(item)
            }
         }
        //  当前数据请求没有发出
         var flag = false;
         window.onscroll = function (e) {
            //  判断最短列是否出现空白
            var clientHeight = document.documentElement.clientHeight;
            var scrollTop = document.documentElement.scrollTop;
            var minHeight = getMinLi().minHeight;
             if (minHeight < clientHeight + scrollTop) {
                 if(!flag) {
                    flag = true;
                    getData();
                 }
                
             }
            console.log(clientHeight, window.innerHeight)
         }
         
         getData()
     </script>
</body>
</html>


/**
 * 
 * ajax :  async javascript and json
 *       主要用来实现前后端的数据交流
 *   A 要发送一个信息给 B 
 *      请求当中需要有的基本信息：
 *          1. B的地址
 *          2. 请求方式  GET  POST
 *          3. 请求数据
 *          4. 状态码  （B是否正常接收数据）
 *          5. 响应数据
 *  XMLHTTPRequest
 * 
 *    五层网络模型：
 *    应用层   
 *    传输层
 *    网络层
 *  数据链路层   
 *    物理层 
 * 
 */
function ajax(url, type, data, success, flag) {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xhr.onreadystatechange = function() {
        // 0 1 2 3 4
        // 0: 当前代理已经被创建  还没有调用open方法
        // 1： 调用了open方法 建立连接
        // 2： send方法已经被调用
        // 3： 代表正在接收响应信息  
        // 4： 代表响应数据全部发送完成
        // console.log(xhr.readyState)
        // 404    400 
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                success(JSON.parse(xhr.responseText))
            } else {
                console.log('error')
            }
        }
    }
    if (type == 'GET') {
        xhr.open(type, url + '?' + data, flag);
        xhr.send();
    } else if (type == 'POST'){
        xhr.open(type, url, flag);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // key=value&key1=value1  
        xhr.send(data);
    }
}

哪天才能学到vue

发布了60 篇原创文章 · 获赞 17 · 访问量 6408

私信关注

实现瀑布流（懒加载）

猜你喜欢