ajax+懒加载+瀑布流

发表于   |   分类于 ，   |  

页面展示
之前写的一个页面。也算是那么多天对于JQ的一个巩固练习。

注意点

这个页面主要有几年需要注意下：

  • 页面主要机制就是：在页面底部设置一个span，当我看不到他的时候，就加在数据(ajax发送给后台),然后后台吧数据添加到页面上，然后利用瀑布流布局。
  • 页面底部设置一个标记。<span>看到我就加载<span>然后设置属性visibility:hidden让用户看不见.
  • 还有一个就是在容器中事先放置一个空元素，用于计算瀑布流的宽度计算。
  • 当用js获取元素的高度的时候，有可能会出现图片还没加载完成，就进行瀑布流布局，造成计算的高度出现错误，用JQ的Defered方法来让图片完全加载之后，再进行瀑布流布局

代码

说了那么多 下面就是具体的操作

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Z-one</title>
	<style>
	body,h1,h3,p,li,ul{
		margin:0;
		padding:0;
		box-sizing:border-box;
	}
		#wrap{
			width:1200px;
			margin:0 auto;
		}
		.ct{
			position: relative;
		}
		.ct-img{
			position: absolute;
			width:342px;
			text-align: center;
			border:1px solid black;
		}
		.ct-img img{
			width:340px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<h1>简易的现代魔法</h1>
		<ul class="ct">
			<li class="ct-img">
				<li class="hiden"></li>
			</li>
		</ul>
		<span class="load"></span>
	</div>
</body>
</html>

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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="top.js"></script>
<script>
//回到顶部
goTop();
// 优化性能,防止滚动时,短时间多次触发
var clock,
	star=1,
	len=6;

$(window).on("scroll",function(){
	if(clock){
		clearTimeout(clock)
	}
	 clock=setTimeout(function(){
	 	playShow()
	 },300)
});

//初始化
playShow();

//判断是否可见
function playShow(){
	console.log("开始判断")
	if(isVisble($(".getMore"))){
		playAjax()// 发送ajax
	}
}

function isVisble(node){
	var height=$(window).height();
	var getH=node.offset().top;
	console.log (getH)
	var curH=$(window).scrollTop();
	if(height+curH>=getH){
		return true;
	}else{
		return false;
	}
}

function playAjax(){
	console.log("发送数据");
	$.ajax({
		url:'http://platform.sina.com.cn/slide/album_tech',
		type: 'get',
		dataType: 'jsonp',
		jsonp: 'jsoncallback',
		data: {
			app_key: '1271687855',
			num:len,
			page:star 
		},
		success:function(node){
			var tem=node.data;
			star++;
			onSuccess(tem);
		},
		error:function(){
			onError();
		}
	});
}
// 处理返回的数据
function onSuccess(node){
	console.log("处理数据");
	var $nodeShow=concat(node);//拼接字符串,添加到页面中
	var defereds=[]//创建一个空数组
	$nodeShow.find("img").each(function(){
		var defer=$.Deferred();
		$(this).load(function(){
			defer.resolve();
		})//每当图标加载完成后,执行resolve;
		defereds.push(defer)
	});
	 $.when.apply(null,defereds).done(function() { 
	 	console.log("图片加载完成")
		waterFull($nodeShow);
	});
}

function onError(){
	console.log("数据接收出错")
}

//拼接数据，并添加到html中
function concat(items){
	var tpl="",
		$nodes;
	for(var i=0;i<items.length;i++){
		tpl += '<li class="ct-main">';
		tpl += ' <a href="'+ items[i].url +'" ><img src="' + items[i].img_url + '" alt=""></a>';
		tpl += ' <h4 >'+ items[i].short_name +'</h4><hr>';
		tpl += '<p >'+items[i].short_intro+'</p>';
		tpl += '</li>';
	}
	$nodes=$(tpl);
	$(".ct").append($nodes);
	console.log("添加到页面上")
	return $nodes;
}

//瀑布流之前的准备
var sumHeight=[],
	ctWidth=$(".ct").width(),
	mainWidth=$(".ct-main").outerWidth(true),
	sum=Math.floor((ctWidth/mainWidth))

if(sumHeight.length ===0){
	for(var i=0;i<sum;i++){
		sumHeight.push(0);
	}
}
// 开始瀑布流
function waterFull(node){
	$(node).each(function(){
		var idx=0,
			minWidth=sumHeight[0],
			$cur = $(this);
		for(var i=0;i<sum;i++){
			if(sumHeight[i]<minWidth){
				idx=i;
				minWidth=sumHeight[i];
			}
		}
		$cur.css({
				top:minWidth,
				left:mainWidth*idx,
			})
			sumHeight[idx]=sumHeight[idx]+$cur.outerHeight(true)
			$('.ct').height(Math.max.apply(null,sumHeight));
	})
	
}
</script>

不得不说，前端挺折腾人的。