<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <title></title> <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js" ></script> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 1000px; height: 500px; margin: 0 auto; } #box ul li{ float: left; list-style: none; width: 225px; padding: 5px; margin: 5px; box-shadow: 0px 0px 5px #333; } #box ul li .pic{ border: 1px solid #ddd; margin-bottom: 10px; } #box ul li img{ width: 100%; height: 100%; display: block; transition: 1s; -webkit-transition: 1s; } </style> </head> <body> <div id="box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div> </body> </html> <script type="text/javascript"> /* 企业开发流程 1.需求分析 2.生成需求文档 3.标准开发文档 （架构师 ，项目经理） 4.程序员最底层的工作（码农） 分析原理： 1.动态生成图片标签，添加到li里面 1.获取高度最小的li， 2.循环动态添加多个图片 3.判断滚动条的高度，动态添加 * */ var $li = $('#box ul li'); var liLength = $li.length; var i=0; var sum=0; var arr = [ {src:'img/pic1.jpg'}, {src:'img/pic2.jpg'}, {src:'img/pic3.jpg'}, {src:'img/pic4.jpg'}, {src:'img/pic5.jpg'}, {src:'img/pic6.jpg'}, {src:'img/pic7.jpg'}, {src:'img/pic1.jpg'}, {src:'img/pic2.jpg'}, {src:'img/pic3.jpg'}, {src:'img/pic4.jpg'}, {src:'img/pic5.jpg'}, {src:'img/pic4.jpg'}, {src:'img/pic5.jpg'}, {src:'img/pic4.jpg'}, {src:'img/pic5.jpg'} ]; function create(){ var oDiv = document.createElement('div'); oDiv.className = 'pic'; var oImg = new Image(); oImg.src = arr[i%arr.length].src; oImg.style.cssText = 'opacity: 0;transform: scale(0)'; oDiv.appendChild(oImg); $li.eq(getList()).append(oDiv); //console.log(getList()); //闭包 (function(oImg){ setTimeout(function(){ oImg.style.cssText = 'opacity: 1;transform: scale(1)'; },100); })(oImg); } //获取高度最小的li function getList(){ var a = 0; var fH = $li.eq(0).height();//获取第一个li的高度 for(var j=0;j<liLength;j++){ var nH = $li.eq(j).height();//得到对应的li的高度 if(nH<fH){ a = j;//更新最短的索引 fH = nH;//更新最短的高度 } } return a; } create(); //循环动态添加图片，如果i<16,添加12张，如果i>16，每次动态添加3张 function upload(){ i++; if(i<16){//初始化12张图片 for (; i < 16; i++) { create(); } }else{ sum = i;//在16张图片的基础上添加 console.log(sum); for (;i<sum+4;i++) { create(); } } } upload(); //判断滚动条的高度，然后动态添加 //可视区域的高度+滚动高度>文档高度 var scrollH = '';//文档高度 var scrollT = '';//滚动条高度 $(function(){//当页面加载的时候 var _height = $(window).height();//可视区域的高度 $(window).scroll(function(){//滚动条事件 scrollH = document.body.scrollHeight;//文档高度 scrollT = $(window).scrollTop();//滚动条高度 if(_height+scrollT+50>scrollH){ console.log(_height+"--"+scrollT+"--"+scrollH); upload(); } }); }); </script>