热门关键字:
jquery > jquery插件 > 瀑布流 > 响应式jquery瀑布流结合图片延迟加载特效

响应式jquery瀑布流结合图片延迟加载特效

68267
所属分类:瀑布流
发布时间:2015/6/24 12:42:23
下载量:9459
评论数:7
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=346

此作品是一款非常实用的jquery特效,结合了两个jquery插件jquery瀑布流插件blocksit和图片延迟加载插件jquery.lazyload,JquerySchool网站上分享过很多款瀑布流作品,可是很多网友们都觉得不是很懂,有点复杂,今天有空就把此作品整理了出来分享给大家学习用,如果作品有什么问题请多多反馈。。。


实现功能的jquery代码如下:


$(function(){
	$("img.lazy").lazyload({		
		load:function(){
			$('#container').BlocksIt({
				numOfCol:5,
				offsetX: 8,
				offsetY: 8
			});
		}
	});	
	$(window).scroll(function(){
			// 当滚动到最底部以上50像素时, 加载新内容
		if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
			$('#container').append($("#test").html());		
			$('#container').BlocksIt({
				numOfCol:5,
				offsetX: 8,
				offsetY: 8
			});
			$("img.lazy").lazyload();
		}
	});
	
	//window resize
	var currentWidth = 1100;
	$(window).resize(function() {
		var winWidth = $(window).width();
		var conWidth;
		if(winWidth < 660) {
			conWidth = 440;
			col = 2
		} else if(winWidth < 880) {
			conWidth = 660;
			col = 3
		} else if(winWidth < 1100) {
			conWidth = 880;
			col = 4;
		} else {
			conWidth = 1100;
			col = 5;
		}
		
		if(conWidth != currentWidth) {
			currentWidth = conWidth;
			$('#container').width(conWidth);
			$('#container').BlocksIt({
				numOfCol: col,
				offsetX: 8,
				offsetY: 8
			});
		}
	});
});


效果如下:

响应式jquery瀑布流结合图片延迟加载特效





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:瀑布流 图片延迟加载 图片预加载 blocksit 响应式 Jquery相册 滚动条特效
  • 响应式jquery瀑布流结合图片延迟加载特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 响应式jquery瀑布流结合图片延迟加载特效
  • 响应式jquery瀑布流结合图片延迟加载特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐