响应式布局与懒加载实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37635519/article/details/90897780

html部分

<!DOCTYPE html>
<html lang="en">

<head>
   <!--  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
    <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>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrapper">
        <ul>
            <li class="col">
                <div class="item">
                    <div class="imgBox">
                        <img src="./image/0.png" alt="">
                    </div>
                    <p>title</p>

                </div>
            </li>
            <li class="col">
                <div class="item">
                    <div class="imgBox">
                        <img src="./image/1.png" alt="">
                    </div>
                    <p>title</p>

                </div>
            </li>
            <li class="col">
                <div class="item">
                    <div class="imgBox">
                        <img src="./image/2.png" alt="">
                    </div>
                    <p>title</p>

                </div>
            </li>
            <li class="col">
                <div class="item">
                    <div class="imgBox">
                        <img src="./image/3.png" alt="">
                    </div>
                    <p>title</p>

                </div>
            </li>
        </ul>
        <div class="loading">loading...</div>
    </div>
    <script src="./jquery.js"></script>
    <script src="./ajax.js"></script>
    <script src="./index.js"></script>
</body>

</html>

css部分

 *{
    margin:0;
    padding:0;
    list-style: none;
}
.wrapper{
    width:80%;
    min-width:990px;
    margin:0 auto;
    border:1px solid #000;
    text-align: center;
}
.wrapper ul{
    /*border:1px solid #000;*/

    display:inline-block;
}
.wrapper ul li{
    float: left;
}
.wrapper ul li .item{
    width:200px;
    padding:10px;
    border:1px solid #ccc;
    margin:0 5px 10px;

}
.wrapper ul li .imgBox{
    width:200px;
    overflow: hidden;
}
.wrapper ul li .item img{
    width:200px;
}
.wrapper ul li .item p{
    text-align: left;
    font-size: 14px;
}
.wrapper .loading{
      font-size: 30px;
      color:#ccc;
      font-weight:bolder;
      display:none;
}

js部分

  


function getData(){
    // method, url, callback, data, flag
    ajax("GET","./data.txt",renderDom, '' ,true);

}
var oLi=document.getElementsByClassName("col");
  // var oImgBox=document.getElementsByClassName("imgBox")
//渲染页面
function renderDom(data){
	data=typeof data ==="string" ? JSON.parse(data):data;
	console.log(data);
     data.forEach(function(ele,index){
          
     		var minIndex = getMinli();
     		var itemDom = addDom(ele);

     		oLi[minIndex].innerHTML+=itemDom;
     		  console.log( ele.height*200/ele.width)

     		 

     })
}


function addDom(data){
	var oHight=parseInt(data.height*200/data.width)+"px"
	var dom='<div class="item">\
                    <div class="imgBox" style="height:'+ oHight+'">\
                        <img src="'+ data.image+'" alt="">\
                    </div>\
                    <p>'+data.title+'</p>\
                </div>'
      return dom;

}
//查找最短的列
function getMinli(){
	var oLi=document.getElementsByClassName("col");//类数组
	var minIndex = 0;
	var minHeight=oLi[minIndex].offsetHeight;
	for(var i=1;i<oLi.length;i++){
		if(oLi[i].offsetHeight<minHeight){
			minHeight=oLi[i].offsetHeight;
			minIndex=i;
		}
		
	}
	return minIndex;
}
 //懒加载
window.onscroll=function(){
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var clientHeight=document.documentElement.clientHeight;
	var minHeight=oLi[getMinli()].offsetHeight;

	if(scrollTop+clientHeight>minHeight){
		getData();
		console.log(scrollTop,clientHeight,minHeight)



	}
}




getData()