water

Posted on

瀑布流

1
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。以下介绍静态页面js的瀑布流制作方法：
1
2
3
4
5
6
7
div{
	width: 200px;
	background-color: paleturquoise;
	position: absolute;
	font-size: 50px;
	transition: top 0.5s,left 0.5s;
}
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
var arrH = [];
var index = 1;
createDiv(40);
/*
 * createDiv 创建div函数
 * n参数是 创建div的个数
 */
function createDiv(n){
	var n = n || 1;
	for (var i=0; i<n; i++) {
		var div = document.createElement('div');
		div.style.height = rndFn(100,300) + 'px';
		div.innerHTML = index;
		index ++;
		document.body.appendChild(div);
	}
	changeFn();
	//改变div的位置
}
//屏幕宽度大小改变时触发
window.onresize = function  () {
	changeFn();
	//变换div位置
}
//滚动条滚动时触发
window.onscroll = function(){
	//获取滚动条位置
	var sTop = document.body.scrollTop || document.documentElement.scrollTop;
	//获取屏幕高度
	var winH = document.documentElement.clientHeight;
	//当屏幕下方位置到达 每列的最小宽度-50时，创建div
	if (sTop+winH >= arrH[findMin(arrH)-50]) {
		createDiv();
	}
}
/*
 * changeFn 改变div的left和top
 */
function changeFn(){
	//屏幕宽度
	var winW = document.documentElement.clientWidth;
	//获取所有Div
	var aDiv = document.querySelectorAll('div');
	//计算一行可以排几列
	var num = parseInt(winW/(aDiv[0].offsetWidth+10));
	//计算剩余的宽度的一半，就是两边的间隔
	var center = (winW - ((aDiv[0].offsetWidth+10)*num-10))/2;
	arrH = [];
	for (var i = 0; i <aDiv.length; i++) {
		if (i<num) {
		//第一行
			aDiv[i].style.left = center+i*(aDiv[i].offsetWidth+10) + 'px';
			aDiv[i].style.top = 0;
			arrH[i] = aDiv[i].offsetHeight + 10;
			//高度变化，更新数组的高度值
		}else{
			var min = findMin(arrH)
			//找到最小高度
			aDiv[i].style.left = center+min*(aDiv[i].offsetWidth+10) + 'px';
			aDiv[i].style.top = arrH[min]  + 'px';
			arrH[min] += aDiv[i].offsetHeight + 10;
		}
	}
}
/*
 * findMin 找数组中最小值的位置
 * arr参数是要操作的数组
 * 返回（number）数组中最小值的位置
 */
function findMin(arr){
	var min = arr[0];
	var index = 0;
	for (var i=1; i < arr.length; i++) {
		if (min > arr[i]) {
			min = arr[i];
			index = i;
		}
	}
	return index;
}
/*
 * 随机函数
 * min 最小值
 * max 最大值
 */
function rndFn(min , max){
	return Math.round(Math.random()*(max-min)+min);
}