以下是 带收藏转载的jquery瀑布流代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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瀑布流</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="js/jquery-1.7.2.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>
<!--瀑布流 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="#" ><img width="210" alt="20个圆角风格minimal图标" src="images/1.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >20个圆角风格minimal图标</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="154个网站开发常用图标下载" src="images/2.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >154个网站开发常用图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="3D立体网页图标下载" src="images/3.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >3D立体网页图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="psd手机图标矢量图下载" src="images/4.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >psd手机图标矢量图下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="超炫手机图标素材下载含psd文件" src="images/5.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >超炫手机图标素材下载含psd文件</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="圆形扁平化图标PSD素材" src="images/6.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >圆形扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="psd时钟和邮箱网页图标素材下载" src="images/7.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >psd时钟和邮箱网页图标素材下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="16个立体生活网页图标素材下载" src="images/8.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >16个立体生活网页图标素材下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="谷歌风格扁平化图标PSD素材" src="images/9.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >谷歌风格扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="谷歌矢量网页图标素材下载含psd" src="images/10.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >谷歌矢量网页图标素材下载含psd</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="谷歌系列扁平化图标PSD素材" src="images/2.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >谷歌系列扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="高清手机界面psd图标下载" src="images/8.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >高清手机界面psd图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</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="#" ><img width="210" alt="20个圆角风格minimal图标" src="images/1.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >20个圆角风格minimal图标</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="154个网站开发常用图标下载" src="images/2.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >154个网站开发常用图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="3D立体网页图标下载" src="images/3.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >3D立体网页图标下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="psd手机图标矢量图下载" src="images/4.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >psd手机图标矢量图下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="超炫手机图标素材下载含psd文件" src="images/5.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >超炫手机图标素材下载含psd文件</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="圆形扁平化图标PSD素材" src="images/6.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >圆形扁平化图标PSD素材</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="psd时钟和邮箱网页图标素材下载" src="images/7.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >psd时钟和邮箱网页图标素材下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img"> <a href="#" ><img width="210" alt="16个立体生活网页图标素材下载" src="images/8.jpg" /></a>
<div class="btns">
<a href="#" 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="#" 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="#" >16个立体生活网页图标素材下载</a></span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl"> <span>标签: <a href="#">psd分层素材</a> <a href="#">网页图标</a> </span> </div>
</div>
</div>
<!--item end-->
</div>
<script type="text/javascript">
//回话顶部JS，最下面还有一段代码
var ScrollToTop=ScrollToTop||{
setup:function(){
var a=$(window).height()/2;
$(window).scroll(function(){
(window.innerWidth?window.pageYOffset:document.documentElement.scrollTop)>=a?$("#ScrollToTop").removeClass("Offscreen"):$("#ScrollToTop").addClass("Offscreen")
});
$("#ScrollToTop").click(function(){
$("html, body").animate({scrollTop:"0px"},400);
return false
})
}
};
$(document).ready(function(){
ScrollToTop.setup();
});
</script>
</body>
</html>
JS代码(jquery.infinitescroll.js):
/*--------------------------------Infinite Scroll--------------------------------+ https://github.com/paulirish/infinite-scroll+ version 2.0b2.111027+ Copyright 2011 Paul Irish & Luke Shumard+ Licensed under the MIT license+ Documentation:http://infinite-scroll.com/*/
(function (window,$,undefined){
$.infinitescroll = function infscr(options,callback,element){
this.element = $(element);
this._create(options,callback);
}
;
$.infinitescroll.defaults ={
loading:{
finished:undefined,finishedMsg:"<em>Congratulations,you've reached the end of the internet.</em>",img:"http://www.infinite-scroll.com/loading.gif",msg:null,msgText:"<em>Loading the next set of posts...</em>",selector:null,speed:'fast',start:undefined}
,state:{
isDuringAjax:false,isInvalidPage:false,isDestroyed:false,isDone:false,// For when it goes all the way through the archive. isPaused:false,currPage:1}
,callback:undefined,debug:false,behavior:undefined,binder:$(window),// used to cache the selector nextSelector:"div.navigation a:first",navSelector:"div.navigation",contentSelector:null,// rename to pageFragment extraScrollPx:150,itemSelector:"div.post",animate:false,pathParse:undefined,dataType:'html',appendCallback:true,bufferPx:40,errorCallback:function (){
}
,infid:0,//Instance ID pixelsFromNavToBottom:undefined,path:undefined}
;
$.infinitescroll.prototype ={
/* ---------------------------- Private methods ---------------------------- */
// Bind or unbind from scroll _binding:function infscr_binding(binding){
var instance = this,opts = instance.options;
opts.v = '2.0b2.111027';
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_binding_'+opts.behavior] !== undefined){
this['_binding_'+opts.behavior].call(this);
return;
}
if (binding !== 'bind' && binding !== 'unbind'){
this._debug('Binding value ' + binding + ' not valid') return false;
}
if (binding == 'unbind'){
(this.options.binder).unbind('smartscroll.infscr.' + instance.options.infid);
}
else{
(this.options.binder)[binding]('smartscroll.infscr.' + instance.options.infid,function (){
instance.scroll();
}
);
}
;
this._debug('Binding',binding);
}
,// Fundamental aspects of the plugin are initialized _create:function infscr_create(options,callback){
// If selectors from options aren't valid,return false if (!this._validate(options)){
return false;
}
// Define options and shorthand var opts = this.options = $.extend(true,{
}
,$.infinitescroll.defaults,options),// get the relative URL - everything past the domain name. relurl = /(.*?\/\/).*?(\/.*)/,path = $(opts.nextSelector).attr('href');
// contentSelector is 'page fragment' option for .load() / .ajax() calls opts.contentSelector = opts.contentSelector || this.element;
// loading.selector - if we want to place the load message in a specific selector,defaulted to the contentSelector opts.loading.selector = opts.loading.selector || opts.contentSelector;
// if there's not path,return if (!path){
this._debug('Navigation selector not found');
return;
}
// Set the path to be a relative URL from root. opts.path = this._determinepath(path);
// Define loading.msg opts.loading.msg = $('<div id="infscr-loading"><img alt="Loading..." src="' + opts.loading.img + '" /><div>' + opts.loading.msgText + '</div></div>');
// Preload loading.img (new Image()).src = opts.loading.img;
// distance from nav links to bottom // computed as:height of the document + top offset of container - top offset of nav link opts.pixelsFromNavToBottom = $(document).height() - $(opts.navSelector).offset().top;
// determine loading.start actions opts.loading.start = opts.loading.start || function(){
$(opts.navSelector).hide();
opts.loading.msg .appendTo(opts.loading.selector) .show(opts.loading.speed,function (){
beginAjax(opts);
}
);
}
;
// determine loading.finished actions opts.loading.finished = opts.loading.finished || function(){
opts.loading.msg.fadeOut('normal');
}
;
// callback loading opts.callback = function(instance,data){
if (!!opts.behavior && instance['_callback_'+opts.behavior] !== undefined){
instance['_callback_'+opts.behavior].call($(opts.contentSelector)[0],data);
}
if (callback){
callback.call($(opts.contentSelector)[0],data,opts);
}
}
;
this._setup();
}
,// Console log wrapper _debug:function infscr_debug(){
if (this.options && this.options.debug){
return window.console && console.log.call(console,arguments);
}
}
,// find the number to increment in the path. _determinepath:function infscr_determinepath(path){
// alert(path);
var opts = this.options;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_determinepath_'+opts.behavior] !== undefined){
this['_determinepath_'+opts.behavior].call(this,path);
return;
}
if (!!opts.pathParse){
this._debug('pathParse manual');
return opts.pathParse(path,this.options.state.currPage+1);
}
else if (path.match(/^(.*?)\b2\b(.*?$)/)){
path = path.match(/^(.*?)\b2\b(.*?$)/).slice(1);
// if there is any 2 in the url at all.}
else if (path.match(/^(.*?)2(.*?$)/)){
// page= is used in django:// http://www.infinite-scroll.com/changelog/comment-page-1/#comment-127 if (path.match(/^(.*?page=)2(\/.*|$)/)){
path = path.match(/^(.*?page=)2(\/.*|$)/).slice(1);
return path;
}
path = path.match(/^(.*?)2(.*?$)/).slice(1);
}
else{
// page= is used in drupal too but second page is page=1 not page=2:// thx Jerod Fritz,vladikoff if (path.match(/^(.*?page=)1(\/.*|$)/)){
path = path.match(/^(.*?page=)1(\/.*|$)/).slice(1);
return path;
}
else{
this._debug('Sorry,we couldn\'t parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error:yell,scream,and kindly ask for help at infinite-scroll.com.');
// Get rid of isInvalidPage to allow permalink to state opts.state.isInvalidPage = true;
//prevent it from running on this page.}
}
this._debug('determinePath',path);
//alert(path);
return path;
}
,// Custom error _error:function infscr_error(xhr){
var opts = this.options;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_error_'+opts.behavior] !== undefined){
this['_error_'+opts.behavior].call(this,xhr);
return;
}
if (xhr !== 'destroy' && xhr !== 'end'){
xhr = 'unknown';
}
this._debug('Error',xhr);
if (xhr == 'end'){
this._showdonemsg();
}
opts.state.isDone = true;
opts.state.currPage = 1;
// if you need to go back to this instance opts.state.isPaused = false;
this._binding('unbind');
}
,// Load Callback _loadcallback:function infscr_loadcallback(box,data){
var opts = this.options,callback = this.options.callback,// GLOBAL OBJECT FOR CALLBACK result = (opts.state.isDone) ? 'done':(!opts.appendCallback) ? 'no-append':'append',frag;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_loadcallback_'+opts.behavior] !== undefined){
this['_loadcallback_'+opts.behavior].call(this,box,data);
return;
}
switch (result){
case 'done':this._showdonemsg();
return false;
break;
case 'no-append':if (opts.dataType == 'html'){
data = '<div>' + data + '</div>';
data = $(data).find(opts.itemSelector);
}
;
break;
case 'append':var children = box.children();
// if it didn't return anything if (children.length == 0){
return this._error('end');
}
// use a documentFragment because it works when content is going into a table or UL frag = document.createDocumentFragment();
while (box[0].firstChild){
frag.appendChild(box[0].firstChild);
}
this._debug('contentSelector',$(opts.contentSelector)[0]) $(opts.contentSelector)[0].appendChild(frag);
// previously,we would pass in the new DOM element as context for the callback // however we're now using a documentfragment,which doesnt havent parents or children,// so the context is the contentContainer guy,and we pass in an array // of the elements collected as the first argument. data = children.get();
break;
}
// loadingEnd function opts.loading.finished.call($(opts.contentSelector)[0],opts) // smooth scroll to ease in the new content if (opts.animate){
var scrollTo = $(window).scrollTop() + $('#infscr-loading').height() + opts.extraScrollPx + 'px';
$('html,body').animate({
scrollTop:scrollTo}
,800,function (){
opts.state.isDuringAjax = false;
}
);
}
if (!opts.animate) opts.state.isDuringAjax = false;
// once the call is done,we can allow it again. callback(this,data);
}
,_nearbottom:function infscr_nearbottom(){
var opts = this.options,pixelsFromWindowBottomToBottom = 0 + $(document).height() - (opts.binder.scrollTop()) - $(window).height();
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_nearbottom_'+opts.behavior] !== undefined){
return this['_nearbottom_'+opts.behavior].call(this);
}
this._debug('math:',pixelsFromWindowBottomToBottom,opts.pixelsFromNavToBottom);
// if distance remaining in the scroll (including buffer) is less than the orignal nav to bottom.... return (pixelsFromWindowBottomToBottom - opts.bufferPx < opts.pixelsFromNavToBottom);
}
,// Pause / temporarily disable plugin from firing _pausing:function infscr_pausing(pause){
var opts = this.options;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_pausing_'+opts.behavior] !== undefined){
this['_pausing_'+opts.behavior].call(this,pause);
return;
}
// If pause is not 'pause' or 'resume',toggle it's value if (pause !== 'pause' && pause !== 'resume' && pause !== null){
this._debug('Invalid argument. Toggling pause value instead');
}
;
pause = (pause && (pause == 'pause' || pause == 'resume')) ? pause:'toggle';
switch (pause){
case 'pause':opts.state.isPaused = true;
break;
case 'resume':opts.state.isPaused = false;
break;
case 'toggle':opts.state.isPaused = !opts.state.isPaused;
break;
}
this._debug('Paused',opts.state.isPaused);
return false;
}
,// Behavior is determined // If the behavior option is undefined,it will set to default and bind to scroll _setup:function infscr_setup(){
var opts = this.options;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_setup_'+opts.behavior] !== undefined){
this['_setup_'+opts.behavior].call(this);
return;
}
this._binding('bind');
return false;
}
,// Show done message _showdonemsg:function infscr_showdonemsg(){
var opts = this.options;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['_showdonemsg_'+opts.behavior] !== undefined){
this['_showdonemsg_'+opts.behavior].call(this);
return;
}
opts.loading.msg .find('img') .hide() .parent() .find('div').html(opts.loading.finishedMsg).animate({
opacity:1}
,2000,function (){
$(this).parent().fadeOut('normal');
}
);
// user provided callback when done opts.errorCallback.call($(opts.contentSelector)[0],'done');
}
,// grab each selector option and see if any fail _validate:function infscr_validate(opts){
for (var key in opts){
if (key.indexOf && key.indexOf('Selector') > -1 && $(opts[key]).length === 0){
this._debug('Your ' + key + ' found no elements.');
return false;
}
return true;
}
}
,/* ---------------------------- Public methods ---------------------------- */
// Bind to scroll bind:function infscr_bind(){
this._binding('bind');
}
,// Destroy current instance of plugin destroy:function infscr_destroy(){
this.options.state.isDestroyed = true;
return this._error('destroy');
}
,// Set pause value to false pause:function infscr_pause(){
this._pausing('pause');
}
,// Set pause value to false resume:function infscr_resume(){
this._pausing('resume');
}
,// Retrieve next set of content items retrieve:function infscr_retrieve(pageNum){
var instance = this,opts = instance.options,path = opts.path,box,frag,desturl,method,condition,pageNum = pageNum || null,getPage = (!!pageNum) ? pageNum:opts.state.currPage;
beginAjax = function infscr_ajax(opts){
// increment the URL bit. e.g. /page/3/ opts.state.currPage++;
instance._debug('heading into ajax',path);
// if we're dealing with a table we can't use DIVs box = $(opts.contentSelector).is('table') ? $('<tbody/>'):$('<div/>');
desturl = path.join(opts.state.currPage);
method = (opts.dataType == 'html' || opts.dataType == 'json') ? opts.dataType:'html+callback';
if (opts.appendCallback && opts.dataType == 'html') method += '+callback' switch (method){
case 'html+callback':instance._debug('Using HTML via .load() method');
box.load(desturl + ' ' + opts.itemSelector,null,function infscr_ajax_callback(responseText){
instance._loadcallback(box,responseText);
}
);
break;
case 'html':case 'json':instance._debug('Using ' + (method.toUpperCase()) + ' via $.ajax() method');
$.ajax({
// params url:desturl,dataType:opts.dataType,complete:function infscr_ajax_callback(jqXHR,textStatus){
condition = (typeof (jqXHR.isResolved) !== 'undefined') ? (jqXHR.isResolved()):(textStatus === "success" || textStatus === "notmodified");
(condition) ? instance._loadcallback(box,jqXHR.responseText):instance._error('end');
}
}
);
break;
}
}
;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['retrieve_'+opts.behavior] !== undefined){
this['retrieve_'+opts.behavior].call(this,pageNum);
return;
}
// for manual triggers,if destroyed,get out of here if (opts.state.isDestroyed){
this._debug('Instance is destroyed');
return false;
}
;
// we dont want to fire the ajax multiple times opts.state.isDuringAjax = true;
opts.loading.start.call($(opts.contentSelector)[0],opts);
}
,// Check to see next page is needed scroll:function infscr_scroll(){
var opts = this.options,state = opts.state;
// if behavior is defined and this function is extended,call that instead of default if (!!opts.behavior && this['scroll_'+opts.behavior] !== undefined){
this['scroll_'+opts.behavior].call(this);
return;
}
if (state.isDuringAjax || state.isInvalidPage || state.isDone || state.isDestroyed || state.isPaused) return;
if (!this._nearbottom()) return;
this.retrieve();
}
,// Toggle pause value toggle:function infscr_toggle(){
this._pausing();
}
,// Unbind from scroll unbind:function infscr_unbind(){
this._binding('unbind');
}
,// update options update:function infscr_options(key){
if ($.isPlainObject(key)){
this.options = $.extend(true,this.options,key);
}
}
}
/* ---------------------------- Infinite Scroll function ---------------------------- Borrowed logic from the following... jQuery UI - https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js jCarousel - https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js Masonry - https://github.com/desandro/masonry/blob/master/jquery.masonry.js */
$.fn.infinitescroll = function infscr_init(options,callback){
var thisCall = typeof options;
switch (thisCall){
// method case 'string':var args = Array.prototype.slice.call(arguments,1);
this.each(function (){
var instance = $.data(this,'infinitescroll');
if (!instance){
// not setup yet // return $.error('Method ' + options + ' cannot be called until Infinite Scroll is setup');
return false;
}
if (!$.isFunction(instance[options]) || options.charAt(0) === "_"){
// return $.error('No such method ' + options + ' for Infinite Scroll');
return false;
}
// no errors! instance[options].apply(instance,args);
}
);
break;
// creation case 'object':this.each(function (){
var instance = $.data(this,'infinitescroll');
if (instance){
// update options of current instance instance.update(options);
}
else{
// initialize new instance $.data(this,'infinitescroll',new $.infinitescroll(options,callback,this));
}
}
);
break;
}
return this;
}
;
/* * smartscroll:debounced scroll event for jQuery * * https://github.com/lukeshumard/smartscroll * Based on smartresize by @louis_remi:https://github.com/lrbabe/jquery.smartresize.js * * Copyright 2011 Louis-Remi & Luke Shumard * Licensed under the MIT license. * */
var event = $.event,scrollTimeout;
event.special.smartscroll ={
setup:function (){
$(this).bind("scroll",event.special.smartscroll.handler);
}
,teardown:function (){
$(this).unbind("scroll",event.special.smartscroll.handler);
}
,handler:function (event,execAsap){
// Save the context var context = this,args = arguments;
// set correct event type event.type = "smartscroll";
if (scrollTimeout){
clearTimeout(scrollTimeout);
}
scrollTimeout = setTimeout(function (){
$.event.handle.apply(context,args);
}
,execAsap === "execAsap" ? 0:100);
}
}
;
$.fn.smartscroll = function (fn){
return fn ? this.bind("smartscroll",fn):this.trigger("smartscroll",["execAsap"]);
}
;
}
)(window,jQuery);
JS代码(jquery.masonry.js):
/** * jQuery Masonry v2.1.03 * A dynamic layout plugin for jQuery * The flip-side of CSS Floats * http://masonry.desandro.com * * Licensed under the MIT license. * Copyright 2011 David DeSandro */
/*jshint browser:true,curly:true,eqeqeq:true,forin:false,immed:false,newcap:true,noempty:true,strict:true,undef:true */
/*global jQuery:false */
(function( window,$,undefined ){
'use strict';
/* * smartresize:debounced resize event for jQuery * * latest version and complete README available on Github:* https://github.com/louisremi/jquery.smartresize.js * * Copyright 2011 @louis_remi * Licensed under the MIT license. */
var $event = $.event,resizeTimeout;
$event.special.smartresize ={
setup:function(){
$(this).bind( "resize",$event.special.smartresize.handler );
}
,teardown:function(){
$(this).unbind( "resize",$event.special.smartresize.handler );
}
,handler:function( event,execAsap ){
// Save the context var context = this,args = arguments;
// set correct event type event.type = "smartresize";
if ( resizeTimeout ){
clearTimeout( resizeTimeout );
}
resizeTimeout = setTimeout(function(){
jQuery.event.handle.apply( context,args );
}
,execAsap === "execAsap"? 0:100 );
}
}
;
$.fn.smartresize = function( fn ){
return fn ? this.bind( "smartresize",fn ):this.trigger( "smartresize",["execAsap"] );
}
;
// ========================= Masonry =============================== // our "Widget" object constructor $.Mason = function( options,element ){
this.element = $( element );
this._create( options );
this._init();
}
;
$.Mason.settings ={
isResizable:true,isAnimated:false,animationOptions:{
queue:false,duration:500}
,gutterWidth:0,isRTL:false,isFitWidth:false,containerStyle:{
position:'relative'}
}
;
$.Mason.prototype ={
_filterFindBricks:function( $elems ){
var selector = this.options.itemSelector;
// if there is a selector // filter/find appropriate item elements return !selector ? $elems:$elems.filter( selector ).add( $elems.find( selector ) );
}
,_getBricks:function( $elems ){
var $bricks = this._filterFindBricks( $elems ) .css({
position:'absolute'}
) .addClass('masonry-brick');
return $bricks;
}
,// sets up widget _create:function( options ){
this.options = $.extend( true,{
}
,$.Mason.settings,options );
this.styleQueue = [];
// get original styles in case we re-apply them in .destroy() var elemStyle = this.element[0].style;
this.originalStyle ={
// get height height:elemStyle.height || ''}
;
// get other styles that will be overwritten var containerStyle = this.options.containerStyle;
for ( var prop in containerStyle ){
this.originalStyle[ prop ] = elemStyle[ prop ] || '';
}
this.element.css( containerStyle );
this.horizontalDirection = this.options.isRTL ? 'right':'left';
this.offset ={
x:parseInt( this.element.css( 'padding-' + this.horizontalDirection ),10 ),y:parseInt( this.element.css( 'padding-top' ),10 )}
;
//console.log(this.offset.y);
this.isFluid = this.options.columnWidth && typeof this.options.columnWidth === 'function';
// add masonry class first time around var instance = this;
setTimeout( function(){
instance.element.addClass('masonry');
}
,0 );
// bind resize method if ( this.options.isResizable ){
$(window).bind( 'smartresize.masonry',function(){
instance.resize();
}
);
}
// need to get bricks this.reloadItems();
}
,// _init fires when instance is first created // and when instance is triggered again -> $el.masonry();
_init:function( callback ){
this._getColumns();
this._reLayout( callback );
}
,option:function( key,value ){
// set options AFTER initialization:// signature:$('#foo').bar({
cool:false}
);
if ( $.isPlainObject( key ) ){
this.options = $.extend(true,this.options,key);
}
}
,// ====================== General Layout ====================== // used on collection of atoms (should be filtered,and sorted before ) // accepts atoms-to-be-laid-out to start with layout:function( $bricks,callback ){
// place each brick for (var i=0,len = $bricks.length;
i < len;
i++){
this._placeBrick( $bricks[i] );
}
// set the size of the container var containerSize ={
}
;
containerSize.height = Math.max.apply( Math,this.colYs );
if ( this.options.isFitWidth ){
var unusedCols = 0;
i = this.cols;
// count unused columns while ( --i ){
if ( this.colYs[i] !== 0 ){
break;
}
unusedCols++;
}
// fit container to columns that have been used;
containerSize.width = (this.cols - unusedCols) * this.columnWidth - this.options.gutterWidth;
}
this.styleQueue.push({
$el:this.element,style:containerSize}
);
// are we animating the layout arrangement? // use plugin-ish syntax for css or animate var styleFn = !this.isLaidOut ? 'css':( this.options.isAnimated ? 'animate':'css' ),animOpts = this.options.animationOptions;
// process styleQueue var obj;
for (i=0,len = this.styleQueue.length;
i < len;
i++){
obj = this.styleQueue[i];
obj.$el[ styleFn ]( obj.style,animOpts );
}
// clear out queue for next time this.styleQueue = [];
// provide $elems as context for the callback if ( callback ){
callback.call( $bricks );
}
this.isLaidOut = true;
}
,// calculates number of columns // i.e. this.columnWidth = 200 _getColumns:function(){
var container = this.options.isFitWidth ? this.element.parent():this.element,containerWidth = container.width();
// use fluid columnWidth function if there this.columnWidth = this.isFluid ? this.options.columnWidth( containerWidth ):// if not,how about the explicitly set option? this.options.columnWidth || // or use the size of the first item this.$bricks.outerWidth(true) || // if there's no items,use size of container containerWidth;
this.columnWidth += this.options.gutterWidth;
this.cols = Math.floor( ( containerWidth + this.options.gutterWidth ) / this.columnWidth );
this.cols = Math.max( this.cols,1 );
}
,// layout logic _placeBrick:function( brick ){
var $brick = $(brick),colSpan,groupCount,groupY,groupColY,j;
//how many columns does this brick span colSpan = Math.ceil( $brick.outerWidth(true) / ( this.columnWidth + this.options.gutterWidth ) );
colSpan = Math.min( colSpan,this.cols );
if ( colSpan === 1 ){
// if brick spans only one column,just like singleMode groupY = this.colYs;
}
else{
// brick spans more than one column // how many different places could this brick fit horizontally groupCount = this.cols + 1 - colSpan;
groupY = [];
// for each group potential horizontal position for ( j=0;
j < groupCount;
j++ ){
// make an array of colY values for that one group groupColY = this.colYs.slice( j,j+colSpan );
// and get the max value of the array groupY[j] = Math.max.apply( Math,groupColY );
}
}
// get the minimum Y value from the columns var minimumY = Math.min.apply( Math,groupY ),shortCol = 0;
//console.log(Math);
// Find index of short column,the first from the left for (var i=0,len = groupY.length;
i < len;
i++){
if ( groupY[i] === minimumY ){
shortCol = i;
break;
}
}
// position the brick var position ={
top:minimumY + this.offset.y}
;
// position.left or position.right position[ this.horizontalDirection ] = this.columnWidth * shortCol + this.offset.x;
this.styleQueue.push({
$el:$brick,style:position}
);
// apply setHeight to necessary columns var setHeight = minimumY + $brick.outerHeight(true),setSpan = this.cols + 1 - len;
for ( i=0;
i < setSpan;
i++ ){
this.colYs[ shortCol + i ] = setHeight;
}
}
,resize:function(){
var prevColCount = this.cols;
// get updated colCount this._getColumns();
if ( this.isFluid || this.cols !== prevColCount ){
// if column count has changed,trigger new layout this._reLayout();
}
}
,_reLayout:function( callback ){
// reset columns var i = this.cols;
this.colYs = [];
while (i--){
this.colYs.push( 0 );
}
// apply layout logic to all bricks this.layout( this.$bricks,callback );
}
,// ====================== Convenience methods ====================== // goes through all children again and gets bricks in proper order reloadItems:function(){
this.$bricks = this._getBricks( this.element.children() );
}
,reload:function( callback ){
this.reloadItems();
this._init( callback );
}
,// convienence method for working with Infinite Scroll appended:function( $content,isAnimatedFromBottom,callback ){
if ( isAnimatedFromBottom ){
// set new stuff to the bottom this._filterFindBricks( $content ).css({
top:this.element.height()}
);
var instance = this;
setTimeout( function(){
instance._appended( $content,callback );
}
,1 );
}
else{
this._appended( $content,callback );
}
}
,_appended:function( $content,callback ){
var $newBricks = this._getBricks( $content );
// add new bricks to brick pool this.$bricks = this.$bricks.add( $newBricks );
this.layout( $newBricks,callback );
}
,// removes elements from Masonry widget remove:function( $content ){
this.$bricks = this.$bricks.not( $content );
$content.remove();
}
,// destroys widget,returns elements and container back (close) to original style destroy:function(){
this.$bricks .removeClass('masonry-brick') .each(function(){
this.style.position = '';
this.style.top = '';
this.style.left = '';
}
);
// re-apply saved container styles var elemStyle = this.element[0].style;
for ( var prop in this.originalStyle ){
elemStyle[ prop ] = this.originalStyle[ prop ];
}
this.element .unbind('.masonry') .removeClass('masonry') .removeData('masonry');
$(window).unbind('.masonry');
}
}
;
// ======================= imagesLoaded Plugin =============================== /*! * jQuery imagesLoaded plugin v1.1.0 * http://github.com/desandro/imagesloaded * * MIT License. by Paul Irish et al. */
// $('#my-container').imagesLoaded(myFunction) // or // $('img').imagesLoaded(myFunction) // execute a callback when all images have loaded. // needed because .load() doesn't work on cached images // callback function gets image collection as argument // `this` is the container $.fn.imagesLoaded = function( callback ){
var $this = this,$images = $this.find('img').add( $this.filter('img') ),len = $images.length,blank = 'data:image/gif;
base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==',loaded = [];
function triggerCallback(){
callback.call( $this,$images );
}
function imgLoaded( event ){
var img = event.target;
if ( img.src !== blank && $.inArray( img,loaded ) === -1 ){
loaded.push( img );
if ( --len <= 0 ){
setTimeout( triggerCallback );
$images.unbind( '.imagesLoaded',imgLoaded );
}
}
}
// if no images,trigger immediately if ( !len ){
triggerCallback();
}
$images.bind( 'load.imagesLoaded error.imagesLoaded',imgLoaded ).each( function(){
// cached images don't fire load sometimes,so we reset src. var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f // data uri bypasses webkit log warning (thx doug jones) this.src = blank;
this.src = src;
}
);
return $this;
}
;
// helper function for logging errors // $.error breaks jQuery chaining var logError = function( message ){
if ( window.console ){
window.console.error( message );
}
}
;
// ======================= Plugin bridge =============================== // leverages data method to either create or return $.Mason constructor // A bit from jQuery UI // https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js // A bit from jcarousel // https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js $.fn.masonry = function( options ){
if ( typeof options === 'string' ){
// call method var args = Array.prototype.slice.call( arguments,1 );
this.each(function(){
var instance = $.data( this,'masonry' );
if ( !instance ){
logError( "cannot call methods on masonry prior to initialization;
" + "attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
logError( "no such method '" + options + "' for masonry instance" );
return;
}
// apply method instance[ options ].apply( instance,args );
}
);
}
else{
this.each(function(){
var instance = $.data( this,'masonry' );
if ( instance ){
// apply options & init instance.option( options ||{
}
);
instance._init();
}
else{
// initialize new instance $.data( this,'masonry',new $.Mason( options,this ) );
}
}
);
}
return this;
}
;
}
)( window,jQuery );
CSS代码(pbl.css):
/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
em{font-style:normal;}
a{text-decoration:none;cursor:pointer;color:#666666;}
a:hover{color:#666666;}
body{background:none repeat scroll 0 0 #E6E6E6;font-family:Arial;font-size:12px;}
.fl{float:left;}
.fr{float:right;}
.fl span{font-weight:}
.fl span a{margin-left:5px;margin-right:5px;color:#666666;}
.fl span a:hover{color:#999999;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}
.demo{width:950px;margin:0 auto;}
/* item_list */
.item_list{position:relative;padding:0 0 50px;}
.item{width:231px;background:#F0F0F0;overflow:hidden;margin:15px 0 0 0;border:1px solid #D9D4D4;border-radius:4px 4px 4px 4px;box-shadow:0 1px 3px rgba(34,25,25,0.2);}
.item_ie{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:#909090 2px 2px 3px;-moz-box-shadow:#909090 2px 2px 3px;box-shadow:#909090 2px 2px 3px;background:#F0F0F0;background:-webkit-gradient(linear,0 0,0 bottom,from(#F0F0F0),to(#F0F0F0));background:-webkit-linear-gradient(#F0F0F0,#F0F0F0);background:-moz-linear-gradient(#F0F0F0,#F0F0F0);background:-ms-linear-gradient(#F0F0F0,#F0F0F0);background:-o-linear-gradient(#F0F0F0,#F0F0F0);background:linear-gradient(#F0F0F0,#F0F0F0);-pie-background:linear-gradient(#F0F0F0,#F0F0F0);behavior:url("./xwcms/PIE.htc");width:231px;background:#F0F0F0;overflow:hidden;margin:15px 0 0 0;border:0px solid #D9D4D4;}
.item_t{padding:10px 8px 0;}
.item_t .img{background-color:#FFFFFF;margin:0 auto;position:relative;width:210px;}
.item_t .img a{display:block;}
.item_t .img a:hover{background:#f5f3f3;}
.item_t .img a:hover img{filter:alpha(opacity=80);-khtml-opacity:0.8;opacity:0.8;-webkit-transition:all 0.3s ease-out;-khtml-transition:all 0.3s ease-out;}
.item .btns{display:none;margin:0 1px;position:absolute;right:0;top:1px;width:208px;z-index:3;}
.img_album_btn{top:0px;position:absolute;background:#ff6fa6;color:#ffffff;height:20px;line-height:20px;width:280px;border-radius:3px;}
.img_album_btn:hover{color:#fff;}
.item_t .title{padding:8px 0;line-height:18px;}
.item_t .title em{font-size:15px;font-weight:bolder;color:#2A9CDA;font-family:'����',cursive;margin-right:5px;text-shadow:0 1px 0 #999999;}
.item_t .title span a{color:#000000;font-weight:500;}
.item_t .title span a:hover{text-decoration:underline;}
.item_b{padding:10px 8px;}
.item_b .items_likes .like_btn{background:url("images/fav_icon_word_new_1220.png") no-repeat;display:block;float:left;height:23px;width:59px;margin-right:5px;}
.item_b .items_likes em{line-height:23px;display:block;float:left;padding:0px 6px;color:#FF6699;font-weight:800;border:1px solid #ff6fa6;border-radius:3px;}
.user{border-top:1px solid #c6c6c6;overflow:hidden;padding:10px 8px;}
.ImgLink{display:inline;float:left;margin-right:6px;width:30px;position:relative;text-align:center;}
.ImgLink img{height:30px;width:30px;border:1px solid #FFFFFF;border-radius:30px 30px 30px 30px;height:30px;transition:all 0.3s ease-in 0s;width:30px;}
.ImgLink:hover img{border-radius:0 0 0 0;transition:all 0.3s ease 0s;}
.user p{line-height:1.4;margin:0 0 0 36px;overflow:hidden;word-wrap:break-word;}
.user p a{color:#2A9CDA}
/*�ղ� �� ��ť*/
.item .btns a.repin_link{float:left;}
.f-r{float:right;}
.Button2.Button11{border-radius:3px 3px 3px 3px;font-size:12px;}
.Button2.WhiteButton{background-color:#F0EDED;background-image:-moz-linear-gradient(center top,#FDFAFB,#F9F7F7 50%,#F6F3F4 50%,#F0EDED);border-color:#BBBBBB;color:#524D4D;text-shadow:0 1px rgba(255,255,255,0.9);}
/* more */
#more{display:block;margin:10px auto 20px;}
/* infscr-loading */
#infscr-loading{font-size:18px;font-weight:bolder;bottom:-10px;left:45%;position:absolute;text-align:center;height:20px;line-height:20px;z-index:100;width:160px;float:left;margin-bottom:30px;}
#infscr-loading img{float:left;}
/* page */
.page{display:none;font-size:18px;height:60px;text-align:center;margin:20px 0 0 0;}
.page_num a,.page_num span{margin:0 2px;background:url("images/page.png") no-repeat;display:inline-block;width:30px;height:28px;line-height:26px;overflow:hidden;}
.page_num a{background-position:-65px 0;color:#FF3333;overflow:hidden;}
.page_num .prev{background-position:1px -33px;}
.page_num .unprev{background-position:1px 0;cursor:default;}
.page_num .next{background-position:-32px 0;}
.page_num .unnext{background-position:-32px -33px;cursor:default;}
.page_num .current{background-position:-99px 0;color:#FFFFFF;}
.page_num .etc{background-position:-172px 8px;}
/* page2 */
.pagebox{padding:30px 20px 20px 20px;}
.paging a,.paging span.Bg,.paging a:hover,.paging a.cur,.paging a:hover span.Bg,.paging a.cur span.Bg{background:url(../images/pagebg.png) no-repeat;}
.paging{text-align:center;font-size:13px;}
.paging a{padding-bottom:4px;display:inline-block;background-position:0 -134px;padding-bottom:11px;}
.paging a:hover{text-decoration:none;}
.paging b{font-weight:100;opacity:0;*visibility:hidden;}
.paging span.Bg{width:58px;height:17px;line-height:17px;padding-left:5px;text-align:left;margin-right:1px;display:inline-block;background-position:0px 11px;cursor:pointer;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;}
.paging a:link,.paging a:visited{color:#266EB0;}
.paging a:hover,.paging a.cur{color:#fff;background-position:0px -93px;}
.paging a:hover span.Bg,.paging a.cur span.Bg{background-position:0px -63px;}
.paging a:hover span.Bg b,.paging a.cur span.Bg b{opacity:1;*visibility:visible;}
/* shagnxiafanye */
.paging a.previous,.paging a.previous span.Bg,.paging a.previous b,.paging a.previous:hover,.paging a.previous:hover span.Bg,.paging a.previous:hover b,.paging a.nextpage,.paging a.nextpage span.Bg,.paging a.nextpage b,.paging a.nextpage:hover,.paging a.nextpage:hover span.Bg,.paging a.nextpage:hover b{background:url(../images/prev-next-bg.png) no-repeat}
.paging a.previous{background-position:0px -72px;}
.paging a.previous span.Bg{width:61px;padding-left:0px;background-position:0px -121px;}
.paging a.previous b{background-position:0px 17px;}
.paging a.previous:hover{background-position:0px -25px;}
.paging a.previous:hover span.Bg{background-position:0px -108px;}
.paging a.previous:hover b{background-position:0px 4px;opacity:1;*visibility:visible;}
.paging a.nextpage{background-position:-61px -72px;}
.paging a.nextpage span.Bg{width:61px;padding-left:0px;background-position:-61px -121px;}
.paging a.nextpage b{background-position:-61px 17px;}
.paging a.nextpage:hover{background-position:-61px -25px;}
.paging a.nextpage:hover span.Bg{background-position:-61px -108px;}
.paging a.nextpage:hover b{background-position:-61px 4px;opacity:1;*visibility:visible;}
.paging a.previous b,.paging a.nextpage b{width:61px;display:inline-block;height:17px;opacity:1;*visibility:visible;-moz-transition:all 0.6s ease;-webkit-transition:all 0.6s ease;-o-transition:all 0.6s ease;}
/* to_top */
.to_top a,.to_top a:hover{background:url("images/gotop.png") no-repeat}
.to_top a{background-position:0 0;float:left;height:50px;overflow:hidden;width:50px;position:fixed;bottom:35px;cursor:pointer;right:20px;_position:absolute;_right:auto;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||20));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||20)-(parseInt(this.currentStyle.marginBottom,10)||20)));}
.to_top a:hover{background-position:-51px 0px;}
分享到QQ
分享到微博
微信扫一扫
