响应式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).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
});
}
});
});
版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/204.html
- 上一篇: 前端开发者都应知道的 jQuery 小技巧
- 下一篇: jquery瀑布流插件(WookMark)
评论已关闭