var img = document.getElementsByTagName('img');
var container, box, cols, boxW;
var gaps = 10; //每个图片间间距10px

window.onload = function() {
	AddImgLoadEvent()
	AddImgClickEvent();
	initDiv();

	container = document.getElementById('container');
	box = document.getElementsByClassName('box');

	var clientW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //获取浏览器宽度

	boxW = box[0].offsetWidth + gaps; //每一栏的宽度相等，因此使用box[0]的宽度即可代表box宽度，加上间距宽度为每一栏box占用宽度
	cols = parseInt(clientW / boxW); //根据浏览器宽度适应列数

	imgLocation(img); //页面加载完成即显示部分图片
}



// window.addEventListener('load', winLoad, false)
// function winLoad() {}

window.onscroll = function() {
	imgLocation(img); //滚动过程中动态加载图片
};

function imgLocation(arr) {
	for (var i = 0; i < arr.length; i++) {
		var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		var imgTop = getTop(arr[i]);
		if (imgTop < scrollTop + clientH && imgTop > scrollTop && !arr[i].isLoad) { //判断图片是否在屏幕中
			arr[i].isLoad = true; //标记图片是否已经加载过了
			afterLoad(arr[i]);
		}

	}
}

function afterLoad(obj) {
	var url = obj.getAttribute('data-src');
	obj.src = url; //显示图片
	waterfall(box, cols, boxW);
}

function waterfall(ele, col, eleWidth) {
	container.style.cssText = 'width:' + boxW * cols + 'px;margin:0 auto'; //使页面居中显示
	var heightArr = []; //记录每一列的高度
	for (var i = 0; i < ele.length; i++) {
		if (i < col) { //第一行中top为0，每一列高度为box的offsetHeigh
			ele[i].style.position = 'absolute';
			ele[i].style.top = 0;
			ele[i].style.left = i * eleWidth + 'px';
			heightArr.push(ele[i].offsetHeight);
		} else {
			var minHeight = Math.min.apply(null, heightArr); //获取列高度的最小值
			var minIndex = heightArr.indexOf(minHeight); //获取高度最小的那一列
			ele[i].style.position = 'absolute';
			ele[i].style.top = minHeight + gaps + 'px';
			ele[i].style.left = minIndex * eleWidth + 'px';
			heightArr[minIndex] += ele[i].offsetHeight + gaps; //添加图片后，当前列高度加上box高度和gap高度
		}
	}
}

function getTop(img) {
	var offsetTop = 0;
	do {
		offsetTop += img.offsetTop;
		img = img.offsetParent;
	} while (img.nodeName != 'BODY'); //offsetTop是相对于offserParent的，因此用offseParent
	return offsetTop;
}

// 给图添加点击事件，点击后再新标签页打开
function AddImgClickEvent() {
	var objs = document.getElementsByTagName("img");
	for (var i = 0; i < objs.length; i++) {
		objs[i].onclick = function() {
			window.open(this.src);
		}
		objs[i].style.cursor = "pointer";
	}
}

function AddImgLoadEvent() {
	var objs = document.getElementsByTagName("img");
	for (var i = 0; i < objs.length; i++) {
		objs[i].onload = function() {
			waterfall(box, cols, boxW); //图片完成加载，重新计算位置
			imgLocation(objs); //重新计算位置后，未加载的图片可能会靠上来进入可视区域，所以再加载未加载的图片
		}
	}
}

function initDiv() {
	let parentDiv = document.createElement("div");
	parentDiv.id = "container";
	document.body.insertBefore(parentDiv, document.body.childNodes[0]);

	Array.from(document.images).forEach(i => {
		let box = document.createElement("div");
		box.className = "box";
		box.appendChild(i);
		parentDiv.appendChild(box);
	})
}