此作品是一款非常实用的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
});
}
});
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
瀑布流 图片延迟加载 图片预加载 blocksit 响应式 Jquery相册 滚动条特效