响应式jquery瀑布流结合图片延迟加载特效
dengjianbin
11年前
此作品是一款非常实用的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 }); } }); });
效果如下:
在线演示和下载:http://www.jq-school.com/Detail.aspx?id=346