此作品是一款非常实用的瀑布流特效，带有收藏、转载和返回顶部的jquery瀑布流功能，主要是结合翻页插件jquery.infinitescroll使用,详细介绍可以直接查看jquery学堂菜单下的文章《jquery瀑布流插件masonry结合翻页插件infinitescroll使用》，很少有jquery教程教你去使用的，里面写得很详细。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>带收藏、转载和返回顶部的jquery瀑布流特效-源码搜藏网【www.codesocang.com】</title>
<link rel="stylesheet" href="css/center.css" type="text/css" media="all">
<link rel="stylesheet" href="css/pbl.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.js"></script>
<script type="text/javascript">
var isWidescreen=screen.width>=1280;
if(isWidescreen){document.write("<style type='text/css'>.demo{width:981px;}</style>");}
</script>
<style type="text/css">
.demo{width:981px;}
</style>
<script type="text/javascript">
function item_masonry(){
$('.item img').load(function(){
$('.infinite_scroll').masonry({
itemSelector: '.masonry_brick',
columnWidth:231,
gutterWidth:19
});
});
//columnWidth 函数递增控制div左边距
$('.infinite_scroll').masonry({
itemSelector: '.masonry_brick',
columnWidth:231,
gutterWidth:19
});
}
$(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;
});
});
</script>
</head>
<body>
<center>
<span style="font-size:15px; font-weight:bold; text-align:center; line-height:25px;color:#000; width:100%">带收藏、转载和返回顶部的jquery瀑布流特效<br />
<a href="http://www.codesocang.com" target="_blank" style="color:#000">源码搜藏</a>网站出品（<a href="http://www.codesocang.com" style="color:#000" target="_blank">http://www.codesocang.com</a>）<br />
（<a href="http://bbs.codesocang.com" target="_blank" style="color:#000">Jquery学堂交流社区</a>）
<br />
官方网站学习交流QQ群<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=b8456df79a15d7f2738f6d98794ea09d0b6db0cede06c5dd18bc4c196e3163bd" style="width:90px; height:22px;" alt="源码搜藏" width="90" height="22" title="源码搜藏"></a></span>
</center>
<!--瀑布流 start-->
<div class="pbl_container">
<div class="pblCon">
<div class="demo clearfix">
<div class="item_list infinite_scroll">
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="20个圆角风格minimal图标" src="images/1.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">20个圆角风格minimal图标</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="154个网站开发常用图标下载" src="images/2.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">154个网站开发常用图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="3D立体网页图标下载" src="images/3.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">3D立体网页图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="psd手机图标矢量图下载" src="images/4.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">psd手机图标矢量图下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="超炫手机图标素材下载含psd文件" src="images/5.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">超炫手机图标素材下载含psd文件</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="圆形扁平化图标PSD素材" src="images/6.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">圆形扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="psd时钟和邮箱网页图标素材下载" src="images/7.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">psd时钟和邮箱网页图标素材下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="16个立体生活网页图标素材下载" src="images/8.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">16个立体生活网页图标素材下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="谷歌风格扁平化图标PSD素材" src="images/9.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">谷歌风格扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="谷歌矢量网页图标素材下载含psd" src="images/10.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">谷歌矢量网页图标素材下载含psd</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="谷歌系列扁平化图标PSD素材" src="images/2.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">谷歌系列扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="高清手机界面psd图标下载" src="images/8.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">高清手机界面psd图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
</div>
</div>
</div>
</div>
<!--回到顶部-->
<button id="ScrollToTop" class="btnimg Button2 WhiteButton" type="button">返回<br>顶部</button>
<div id="content" style="display:none">
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="20个圆角风格minimal图标" src="images/1.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">20个圆角风格minimal图标</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="154个网站开发常用图标下载" src="images/2.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">154个网站开发常用图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="3D立体网页图标下载" src="images/3.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">3D立体网页图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="psd手机图标矢量图下载" src="images/4.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">psd手机图标矢量图下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="超炫手机图标素材下载含psd文件" src="images/5.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">超炫手机图标素材下载含psd文件</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="圆形扁平化图标PSD素材" src="images/6.jpg" /></a>
<div class="btns">
<a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton repin_link notlogin"><em></em>转采<span class="num">(102)</span></a>
<div class="f-r"> <a href="http://www.codesocang.com" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
<!-- 收藏 攒一个 结束-->
</div>
</div>
<div class="title"><em>T:</em><span><a href="http://www.codesocang.com" target="_blank">圆形扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="http://www.codesocang.com">psd分层素材</a> <a href="http://www.codesocang.com">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="http://www.codesocang.com" target="_blank"><img width="210" alt="psd时钟和邮箱网页图标素材下载" src="images/7.jpg" /></a>
<div class="btns">