undefined

ajax小项目-留言板瀑布流

发表于 | 分类于 ，
字数统计: 707 | 阅读时长 ≈ 3

瀑布流

瀑布流实现原理分析

特点：每一列的宽度一样的，分批加载，

分类 特点
固定列 可视区域宽度变化，列数不变
非固定列 可视区域宽度变化，列数变化

固定列的瀑布流

布局：在页面放一个ul,定好列数量，三个li，浮动布局，每一列的高度统一都为0，通过ajax异步请求数据，把数据动态地往页面添加，数据是分批请求过来的，每请求一批，把数据动态填充到li里面。为了让高度相差不会太大，把当前数据往三个总高度最短的一列去添加，就可以保证三个li之间的总高度不会相差太远

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
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onload=function(){

			var oUl=document.getElementById("ul1");
			var aLi=oUl.getElementsByTagName('li');

			var iLen=aLi.length;

			//初始化数据处理
			ajax('get','getPics.php','cpage=1',function(data)){
				
				var data= JSON.parse(data);
				
				for (var i = 0; i < data.length; i++) {
					//获取高度最短的li
					var _index=getShort();
					var oDiv=document.createElement('div');
					var oImg=document.createElement('img');
					oImg.src=data[i].preview;
				//oImg.style.width =data[i].width+'px';
				oImg.style.width =225px;
					oImg.style.height =data[i].height+'px';
					oDiv.appendChild(oImg);
					var oP=document.createElement('p');
					oDiv.appendChild(oP);
					oP.innerHTML=data[i].

					aLi[_index].appendChild(oDiv);

				}
				
			});

			function getShort(){
					var index=0;
				var ih=aLi[index].offsetHeight;
				for(var i=1;i<data.length;i++){
					if (aLi[index].offsetHeight) {
						index=i;
						ih=aLi[i].offsetHeight;
					}
				}
				return index;
			}
		}
	</script>
	<style type="text/css">
		body{margin: 0;

		}
		#ul1 {
			width: 1080px;
			margin: 100px auto 0;

		}
		li {
			width: 247px;
			list-style: none;
			float: left;
			margin-right: 10px;
		}
		li div {
			border: 1px solid  #000 ;
			padding: 10px;
			margin-bottom: 10px;
		}
		li div img {
			width: 225px;
			display: block;
		}
	</style>
</head>
<body>

 <ul id="ul1">
 	<li>
 		<div>
 			<img src="http://s3.mogucdn.com/mlcdn/c45406/171227_2da0h5dl13dgedj4j8k62la45h5kf_640x960.jpg_240x360.v1cAC.70.webp">
 			<p></p>
 		</div>
 	</li>
 	<li>
 		<div>
 			<img src="http://s3.mogucdn.com/mlcdn/c45406/171227_2da0h5dl13dgedj4j8k62la45h5kf_640x960.jpg_240x360.v1cAC.70.webp">
 			<p></p>
 		</div>
 	</li>
 	<li>
 		<div>
 			<img src="http://s3.mogucdn.com/mlcdn/c45406/171227_2da0h5dl13dgedj4j8k62la45h5kf_640x960.jpg_240x360.v1cAC.70.webp">
 			<p></p>
 		</div>
 	</li>
 	<li>
 		<div>
 			<img src="http://s3.mogucdn.com/mlcdn/c45406/171227_2da0h5dl13dgedj4j8k62la45h5kf_640x960.jpg_240x360.v1cAC.70.webp">
 			<p></p>
 		</div>
 	</li>
 </ul>
</body>
</html>
流的实现

当我们往下拉的时候，动态地再添加一批数据过来，条件是当前最短的一列li，出现在可视区的时候，也就是只要下面有一列没数据了，就可以开始加载下一批数据了。

当li的top值加上自身的高小于滚动条滚动的高加上可视区自身的高的时候，说明当前最短的一列已经进入可视区了。 

1
2


留言本项目

觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多