waterfall

发表于 |


瀑布流原理：所有的图片使用绝对定位，图片等宽不等高
先列好第一行图片，得到每张图片高度，
第二行第一张图片放在第一行最矮的图片下,
比较每列高度依次把图片摆下去，当页面高度超出浏览器高度时出现滚动条，
将要放上的图片离顶部的距离与滚动条滚动的距离和浏览器高度之和比较来绝对是否更新数据

html

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
<!DOCTYPE html>
<html>
	<head>
		<title>瀑布流布局</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="base.css">
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<div id="main">
			<div class="box">
				<div class="pic">
					<img src="./images/1.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/2.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/3.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/4.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/5.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/6.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/7.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/8.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/9.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/10.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/11.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/12.jpg"">
				</div>
			</div>												
			<div class="box">
				<div class="pic">
					<img src="./images/13.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/14.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/15.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/16.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/17.jpg"">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="./images/18.jpg"">
				</div>
			</div>		
			<div class="box">
				<div class="pic">
					<img src="./images/19.jpg"">
				</div>
			</div>	
		</div>
	</body>
</html>

css

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
*{padding: 0;margin:0;}
#main{
    position: relative;
}
.box{
    padding: 15px 0 0 15px;
    float:left;
}
.pic{
    padding: 10px;
    border:1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.pic img{
    width:165px;
    height:auto;
    z-index: 1;
}
.pic img:hover{
box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
-webkit-transform:rotate(0deg) scale(1.20); 
-moz-transform:rotate(0deg) scale(1.20); 
transform:rotate(0deg) scale(1.20); 
z-index:2
}

js

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
window.onload=function () {
	waterfall('main','box');
	var json8={'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'},{'src':'10.jpg'},{'src':'11.jpg'},{'src':'12.jpg'},{'src':'13.jpg'},
	{'src':'14.jpg'},{'src':'15.jpg'},{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'}]};
	window.onscroll=function(){
		if(checkscroll){
            var oParent = document.getElementById('main');// 父级对象
            for(var i=0;i<json8.data.length;i++){
                var oBox=document.createElement('div'); //添加 元素节点
                oBox.className='box';                   //添加 类名 name属性
                oParent.appendChild(oBox);              //添加 子节点
                var opic=document.createElement('div');
                opic.className='pic';
                oBox.appendChild(opic);
                var oImg=document.createElement('img');
                oImg.src='./images/'+json8.data[i].src;
                opic.appendChild(oImg);
            }
            waterfall('main','box');
        };
    }
}
function waterfall(parent,box){
    var oParent=document.getElementById(parent);// 父级对象
    var aboxs=getClassObj(oParent,box);// 获取存储块框box的数组abox
    var oboxw=aboxs[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/oboxw);
    //oParent.style.cssText='width:'+oboxw*cols+'px;margin:0 auto;';
    var harr=[];
    for (var i=0;i<aboxs.length;i++) {
    	if(i<cols){
    		harr.push(aboxs[i].offsetHeight);
    	}
    	else{
    		var minh=Math.min.apply(null,harr);
    		var index=getminhindex(harr,minh);
    		aboxs[i].style.position='absolute';
    		aboxs[i].style.top=minh+'px';
    		aboxs[i].style.left=oboxw*index+'px';
    		harr[index]+=aboxs[i].offsetHeight;
    	}  
    }
}
function getClassObj(parent,className){
    var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
    var boxS=[];//创建一个数组 用于收集子元素
    for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、存入数组
        if (obj[i].className==className){
            boxS.push(obj[i]);
        }
    };
    return boxS;
}
function getminhindex(arr,val){
	for(var i in arr){
		if(arr[i]==val){return i;}
	}
}
function checkscroll(){
	var oParent=document.getElementById('main');
	var oboxs=getClassObj(oParent,'box');
	var lastboxh=oboxs[oboxs.length-1].offsetTop+Math.floor(oboxs[oboxs.length-1].offsetHeight/2);
	var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
    var documentH=document.documentElement.clientHeight;
	return (lastboxh<scrolltop+documentH)?true:false
}