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

dengjianbin 10年前

此作品是一款非常实用的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