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

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

实现功能的jquery代码如下：

$(function(){
	$("img.lazy").lazyload({
		load:function(){
			$('#container').BlocksIt({
				numOfCol:5,
				offsetX: 8,
				offsetY: 8
			});
		}
	});
	$(window).scroll(function(){
                    //如果要以顶部50像素，可将if()里面的条件改为: $(document).scrollTop() > 50
			// 当滚动到最底部以上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
			});
		}
	});
});

最后编辑：2014-08-12

作者：管理员

这个作者貌似有点懒，什么都没有留下。

站内专栏