<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,
html {
margin: 0;
padding: 0;
}
.box {
float: left;
240px;
padding: 10px;
box-shadow: 0 0 5px gray;
border: solid 1px gray;
}
img {
100%;
}
</style>
<script src="../jquery-2.2.4.min.js"></script>
<script>
$(window).load(function() {
locationImg();
})
$(window).scroll(function() {
if (slideToAdd()) {
var data = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},
{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},
{"src":"8.jpg"},{"src":"9.jpg"}]};
console.log(data);
addElement(data.data);
locationImg();
}
})
//窗口变化
$(window).resize(function() {
locationImg();
})
function addElement(data){
$(data).each(function(index,value){
//动态添加元素
var box = $("<div>").addClass('box').appendTo('.containner');
var src = "../../测试/"+value.src;
console.log(src);
$('<img>').attr('src',src).appendTo(box);
})
}
/*ps:获取某个元素距顶部位置：$('.box').last.get(0).offsetTop get(0)获取指定index的dom元素*/
function slideToAdd() {
var lastBoxMiddleHeight = $(document).height() - $('.box').last().height() / 2;
lastBoxMiddleHeight = Math.floor(lastBoxMiddleHeight);
//滚动距离+ 文档可视高度 > 文档最后一张图片的一半
var scrollHeight = $(document).scrollTop() + $(window).height();
// console.log("lastheight:" + lastBoxMiddleHeight);
// console.log("scrollHeight:" + scrollHeight);
return (scrollHeight > lastBoxMiddleHeight);
}
function locationImg() {
//获取所有的box
var box = $('.box');
var heghtArray = [];
//计算一行可容纳多少张图
var imgNum = $(window).outerWidth(true) / box.eq(0).outerWidth(true);
imgNum = Math.floor(imgNum);
console.log(imgNum);
//迭代排图
box.each(function(index, value) {
var thisValue = $(value);
//找到第一行所有高度
if (index < imgNum) {
var height = box.eq(index).outerHeight(true);
heghtArray[index] = height;
//屏幕变化时，设置回float
thisValue.css({
'position': "static",
'float': 'left',
});
} else {
//找到最短高度
var miniHeight = Math.min.apply(null, heghtArray);
var indexOfMini = heghtArray.indexOf(miniHeight);
//计算左边距离
var left = indexOfMini * box.eq(0).outerWidth(true);
//更改最短高度，这样下一个元素找第二高度
heghtArray[indexOfMini] = miniHeight + thisValue.outerHeight(true);
//设置绝对布局
thisValue.css({
'position': "absolute",
'top': miniHeight,
'left': left,
})
}
})
}
</script>
</head>
<body>
<div class="containner">
<div class="box">
<img src="../../测试/1.jpg" />
</div>
<div class="box">
<img src="../../测试/2.jpg" />
</div>
<div class="box">
<img src="../../测试/3.jpg" />
</div>
<div class="box">
<img src="../../测试/4.jpg" />
</div>
<div class="box">
<img src="../../测试/5.jpg" />
</div>
<div class="box">
<img src="../../测试/6.jpg" />
</div>
<div class="box">
<img src="../../测试/7.jpg" />
</div>
<div class="box">
<img src="../../测试/8.jpg" />
</div>
<div class="box">
<img src="../../测试/9.jpg" />
</div>
<div class="box">
<img src="../../测试/1.jpg" />
</div>
<div class="box">
<img src="../../测试/2.jpg" />
</div>
<div class="box">
<img src="../../测试/3.jpg" />
</div>
<div class="box">
<img src="../../测试/4.jpg" />
</div>
<div class="box">
<img src="../../测试/5.jpg" />
</div>
<div class="box">
<img src="../../测试/6.jpg" />
</div>
<div class="box">
<img src="../../测试/7.jpg" />
</div>
<div class="box">
<img src="../../测试/8.jpg" />
</div>
<div class="box">
<img src="../../测试/9.jpg" />
</div>
</div>
</body>
</html>