1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| window.addEventListener("load",function(event){
//1.实现瀑布流布局
waterFall("main", "box");
//2.加载数据
window.addEventListener("scroll",function(){
if(check()){
//创建一个图片数组
imgArr = [
{"src":"1.jpeg"},
{"src":"3.jpeg"},
{"src":"6.jpeg"},
{"src":"5.jpeg"},
{"src":"4.jpeg"},
{"src":"9.jpeg"},
];
//遍历数组，拼接图片
for(var i = 0; i<imgArr.length; i++){
var newBox = document.createElement("div")
newBox.className = "box";
tool.$('main').appendChild(newBox);
var newPic = document.createElement("div")
newPic.className = "pic";
newBox.appendChild(newPic);
var newImg = document.createElement("img")
newImg.src = "../images/" + imgArr[i].src;
newPic.appendChild(newImg);
}
//重新进行瀑布流布局
waterFall("main", "box")
}
})
})
// 实现瀑布流布局
function waterFall(parent, child){
//实现父盒子居中
//先取出所有盒子
var allBoxs = tool.$(parent).getElementsByClassName(child);
// console.log(allBoxs);
//拿到子盒子的宽度
var boxWidth = allBoxs[0].offsetWidth;
//获取文档的宽度
var srceenW = document.documentElement.clientWidth || document.body.clientWidth;
//求出列数
var cols = parseInt(srceenW/boxWidth)
//实现居中
tool.$(parent).style.width = cols * boxWidth + "px";
tool.$(parent).style.margin = '0 auto';
//子盒子定位
//定义变量
var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
for(var i=0;i<allBoxs.length;i++){
boxHeight = allBoxs[i].offsetHeight;
//判断是否是第一行
if(i < cols){
heightArr.push(boxHeight);
}else{
//剩余行
//取出数组中最矮的
minBoxHeight = getMinBoxHeight(heightArr);
minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
//把盒子追加到最矮的盒子
allBoxs[i].style.position = 'absolute';
allBoxs[i].style.top = minBoxHeight + 'px';
allBoxs[i].style.left = minBoxIndex * boxWidth + 'px';
//更新高度
heightArr[minBoxIndex] += boxHeight;
}
// console.log(minBoxHeight, minBoxIndex)
}
}
function getMinBoxHeight(arr){
var min = arr[0];
for(var i = 1; i < arr.length; i++) {
var cur = arr[i];
cur < min ? min = cur : null
}
return min;
}
function getMinBoxIndex(arr, val){
for(var i = 0; i < arr.length; i++){
if(arr[i] === val){
return i;
}
}
}
//判断是否加载数据
function check(){
//获取最后一个盒子
var allBoxs = tool.$('main').getElementsByClassName('box');
var lastBox = allBoxs[allBoxs.length - 1];
//求最后盒子高度的一半
var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
//求页面高度
var srceenH = document.documentElement.clientHeight || document.body.clientHeight;
//求出页面滚出浏览器的高度
var scrollTopH = tool.scroll().top;
console.log(srceenH,scrollTopH)
return lastBoxDis <= srceenH + scrollTopH;
}
|
