<!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>