函数
*/
window.onload = function() {
var cparent = document.getElementById("container");//得到父节点
setImgLocation(cparent);
//设置加载的
图片
var data = ["image/01.jpg","image/02.jpg","image/03.jpg","image/04.jpg","image/05.jpg","image/06.jpg","image/07.jpg","image/08.jpg","image/09.jpg","image/11.jpg","image/12.jpg","image/13.jpg","image/14.jpg","image/15.jpg","image/16.jpg","image/17.jpg"];
//滑动监听
window.onscroll = function () {
if (checkLoad(cparent)) {
for (var i = 0; i < data.length; i++) {
//创建新的节点
var div1 = document.createElement("div");
div1.className = "
Box";
var div2 = document.createElement("div");
div2.className = "
Box_border";
var img = document.createElement("img");
img.className = ".
Box_border img";
img.src = data[i];
div2.appendChild(img);
div1.appendChild(div2);
cparent.appendChild(div1);
}
setImgLocation(cparent);//创建节点后重新排列
}
}
}
/
检查是否应该加载
/
function checkLoad(cparent){
var childArray = getChildNodes(cparent);//得到图片个数
var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一张图片距离顶部高度
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//获得滑动距离(浏览器兼容性真烦人)
var browserHeight = document.documentElement.clientHeight;//获得浏览器高度
if(lastImgHight < scrollHeight+browserHeight){//判断是否加载
return true;
}else {
return false;
}
}
/
设置图片个数及位置排列
/
function setImgLocation(cparent){
var childArray = getChildNodes(cparent);//得到图片数量
var imgWidth = childArray[0].offsetWidth;//获取照片宽度
var browserWidth = document.documentElement.clientWidth;//获取浏览器宽度
var count = Math.floor(browserWidth/imgWidth);//每行的个数
cparent.style.cssText = "width:"+countimgWidth+"px;margin: 0 auto;";//设置其宽度并居中
//定义数组,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == minHeight){
return i;
}
}
}
/
获取全部图片的个数
/
function getChildNodes(parent){
var childArray =[];//定义一个数组存放图片Box
var tempNodes = parent.getElementsByTagName("");//获取父节点下的所有节点
//循环添加class为Box的节点
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "Box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子节点
}