| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
dengjianbin
10年前发布

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

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

 本文由用户 dengjianbin 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1383277338812.html
瀑布流 图片延迟加载 图片预加载 blocksit 响应式 图片展示jQuery插件 jQuery插件