此作品是一款非常实用的瀑布流特效，带有收藏、转载和返回顶部的jquery瀑布流功能，主要是结合翻页插件jquery.infinitescroll使用,详细介绍可以直接查看jquery学堂菜单下的文章《jquery瀑布流插件masonry结合翻页插件infinitescroll使用》，很少有jquery教程教你去使用的，里面写得很详细。。。
页面主要核心jquery代码如下：
$(function(){
//滚动条下拉事件
function item_callback(){
$('.item').mouseover(function(){
$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
//alert(1);
$('.btns',this).show();
}).mouseout(function(){
$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
$('.btns',this).hide();
});
item_masonry();
}
item_callback();
$('.item').fadeIn();
var sp = 1
$(".infinite_scroll").infinitescroll({
navSelector : "#more",
nextSelector : "#more a",
itemSelector : ".item",
loading:{
img: "images/masonry_loading_1.gif",
msgText: '正在加载中....',
finishedMsg: '木有了,看看下一页',
finished: function(){
sp++;
if(sp>=10){ //到第10页结束事件
$("#more").remove();
$("#infscr-loading").hide();
$("#pagebox").show();
$(window).unbind('.infscr');
}
}
},errorCallback:function(){
$("#pagebox").show();
}
},function(newElements){
var $newElems = $(newElements);
$('.infinite_scroll').masonry('appended', $newElems, false);
$newElems.fadeIn();
item_callback();
return;
});
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
瀑布流 Jquery.masonry 置顶特效 返回顶部 鼠标悬浮 悬停特效 jquery.infinitescroll