通过JQ实现瀑布流加载和流加载教程
程序员文章站
2022-08-10 20:01:12
通过JQ实现瀑布流加载和流加载教程
效果图如下：
1.前端代码.html
通过JQ实现瀑布流加载和流加载教程
效果图如下：1.前端代码.html
<!--瀑布流加载-->
<p class="content">
<!-- 瀑布流样式开始 -->
<p class="waterfull clearfloat" id="waterfull">
<ul>
</ul>
</p>
<!-- loading按钮自己通过样式调整 -->
<p id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
Loading.....
</p>
</p>
2.外部js
<script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script><!--这个插件是JQ必须-->
<!--瀑布流star-->
<!--兼容ie9-->
<script src="__PUBLIC__/waterfall/js/css3-mediaqueries.js"></script>
<script src="__PUBLIC__/waterfall/js/jQueryColor.js"></script>
<!--这个插件是瀑布流主插件函数必须-->
<script src="__PUBLIC__/waterfall/js/jquery.masonry.min.js"></script>
<!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
<script src="__PUBLIC__/waterfall/js/jQeasing.js"></script>
<!--瀑布流end-->
<!--瀑布流控制方式-->
<script type="text/javascript">
/*
抛开瀑布流布局各种乱七八糟的算法，基于masonry的瀑布流，很是简单的，而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
masonry还有很多参数我这里注解了常用的参数
*/
$(function(){
/*瀑布流开始*/
var container = $('.waterfull ul');
var loading=$('#imloading');
// 初始化loading状态
loading.data("on",true);
/*判断瀑布流最大布局宽度，最大为1200*/
function tores(){
var tmpWid=$(window).width();
if(tmpWid>1200){
tmpWid=1200;
}else{
var column=Math.floor(tmpWid/300);
tmpWid=column*300;
}
$('.waterfull').width(tmpWid);
}
tores();
$(window).resize(function(){
tores();
});
container.imagesLoaded(function(){
container.masonry({
columnWidth: 300,
itemSelector : '.item',
isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
isAnimated: true,//是否采用jquery动画进行重拍版
isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
isResizable: true,//是否自动布局默认true
animationOptions: {
duration: 800,
easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
queue: false//是否队列，从一点填充瀑布流
}
});
});
/*模拟从后台获取到的数据*/
var htmlSrc='__PUBLIC__/waterfall/';
var sqlJson=[];
/*本应该通过ajax从后台请求过来类似sqljson的数据然后，便利，进行填充，这里我们用sqlJson来模拟一下数据*/
var page = 1;
var totalNum = 0;
$(window).scroll(function(){
if(!loading.data("on")) return;
// 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
maxTop = 0;
var itemNum=$('#waterfull').find('.item').length;
if(itemNum > 2){
var itemArr=[];
itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
var maxTop=Math.max.apply(null,itemArr);
}
if(maxTop<$(window).height()+$(document).scrollTop()){
//加载更多数据
loading.data("on",false).fadeIn(800);
if(totalNum && itemNum > totalNum){
loading.text('就有这么多了！');
}else{
$.post(
"{:U('getGoodsList')}",
{page:page},
function(data){
if(data.code == 1){
sqlJson = data.list;
appendData(sqlJson);
page++;
}else{
loading.data("on",true).fadeOut();
loading.text('就有这么多了！');
}
},
'json'
);
}
}
});
//流加载的请求
function appendData(sqlJson){
var html="";
for(var i in sqlJson){
var published_date = sqlJson[i].published_date;//此处为数据的获取方式
published_date = published_date.slice(0,10);//日期处理截取数据前10位
html+="";//此处编译动态添加数据
}
//图片懒加载
$(html).find('img').each(function(index){
loadImage($(this).attr('src'));
});
var $newElems = $(html).css({ opacity: 0}).appendTo(container);
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1},800);
container.masonry( 'appended', $newElems,true);
loading.data("on",true).fadeOut();
});
}
//图片懒加载
function loadImage(url) {
var img = new Image();
//创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) {
return img.src;
}
img.onload = function () {
return img.src;
}
}
})
</script>
3.公共样式base.css
/*整体共公样式*/
*{
margin: 0;
padding: 0;
font-family: "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
}
/*防止主题样式更改ie下背景*/
input{
background:#fff;
}
input:focus {outline: none;}
select:focus {outline: none;}
textarea:focus {outline: none;}
textarea{resize: none;}
body{
background: #EEEEEE;
overflow-x: hidden;
font-size: 62.5%;
}
a{
text-decoration: none;
}
a:focus {
outline:none;
}
img{
border: none;
}
b{
font-weight:normal;
}
ul{
list-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.ff{
font-family:"微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
}
.fz_12{
font-size:12px;
}
.fz_13{
font-size:13px;
}
.fz_14{
font-size:14px;
}
.fz_16{
font-size:16px;
}
.fz_18{
font-size:18px;
}
.fz_red{
color:red;
font-weight:normal;
}
.fc_red{
font-size: 12px;
color: red;
}
.fc_blue{
color: #1892e8;
}
.fc_yellow{
font-size: 12px;
color: #fd9904;
}
.fc_green{
font-size: 12px;
color: #3ea406;
}
.fc_gray{
font-size: 12px;
color: #999;
}
.mr10{
margin-right:10px;
}
.pt14{
padding-top: 14px;
}
/*公用清除浮动样式*/
.clear{
clear: both;
}
.clearfloat:after{
clear: both;
display:block;
content:"";
overflow: hidden;
height:0px;
}
.clearfloat{
zoom:1;
}
.radius{
border-radius: 5px;
}
.bds{
box-shadow: 0 0 5px #cccccc;
-webkit-box-shadow: 0 0 5px #cccccc;
-moz-box-shadow: 0 0 5px #cccccc;
-ms-box-shadow: 0 0 5px #cccccc;
}
a.text_line{
text-decoration: underline;
}
a.a_t_line:hover{
text-decoration: underline;
}
.indet_10{
text-indent: 10px;
}
.t_d_18{
text-indent: 18px;
}
.t_d_12{
text-indent: 12px;
}
.t_d_10{
text-indent: 10px;
}
.t_d_8{
text-indent: 8px;
}
.t_d_6{
text-indent: 6px;
}
.t_d_5{
text-indent: 5px;
}
.pointer{
cursor: pointer;
}
.dis-none{
display: none;
}
.dis-block{
display: block;
}
/* 遮罩层 */
#wrapper{
width: 100%;
background: #000;
opacity: 0;
filter:alpha(opacity=0);
position: absolute;
z-index: 100;
left: 0;
top: 0;
}
4.样式index.css
.content{
width: 1280px;
margin: 0 auto;
}
.content .rec_con ul li{
float: left;
width: 290px;
padding: 5px;
margin: 0 8px;
height: 200px;
background: #E8E8E8;
border-radius: 3px;
position: relative;
-webkit-transition: all .45s ease-in-out;
-moz-transition: all .45s ease-in-out;
-ms-transition: all .45s ease-in-out;
-o-transition: all .45s ease-in-out;
transition: all .45s ease-in-out;
}
.content .rec_con ul li.bd-1{
border:solid 1px #98D3E8;
}
.content .rec_con ul li.bd-1:hover{
background: #98D3E8;
}
.content .rec_con ul li.bd-2{
border:solid 1px #FFCB76;
}
.content .rec_con ul li.bd-2:hover{
background: #FFCB76;
}
.content .rec_con ul li.bd-3{
border:solid 1px #FF525A;
}
.content .rec_con ul li.bd-3:hover{
background: #FF525A;
}
.content .rec_con ul li.bd-4{
border:solid 1px #71C46F;
}
.content .rec_con ul li.bd-4:hover{
background: #71C46F;
}
.content .rec_con ul li img{
width: 290px;
height: 200px;
display: block;
}
.content .rec_con ul li .a-index{
position: absolute;
width: 290px;
height: 200px;
top: 5px;
left: 5px;
line-height: 20px;
text-align: center;
background: rgba(0,0,0,0.5);
color: #fff;
}
.content .rec_con ul li .a-index h2{
position: absolute;
z-index: 20;
top: 0;
left: 0;
font-size: 2.0em;
line-height: 28px;
text-align: center;
text-shadow: 0 0px 2px rgba(255,255,255,0.7);
text-align: center;
margin-top: 0px;
width: 98%;
height: 200px;
margin-bottom: 0;
display: table;
padding: 0 1%;
letter-spacing: 2px;
}
.content .rec_con ul li .a-index h2.fc-1{
color:#98D3E8;
}
.content .rec_con ul li .a-index h2.fc-2{
color:#FFCB76;
}
.content .rec_con ul li .a-index h2.fc-3{
color:#FF525A;
}
.content .rec_con ul li .a-index h2.fc-4{
color:#71C46F;
}
.content .rec_con ul li .a-index h2 span{
display: table-cell;
vertical-align: middle;
}
@media screen and (max-width: 1024px){
.content{
width: 97%;
margin: 0 auto;
}
.content .rec_con ul li{
width: 225px;
padding: 2px;
margin: 0 6px;
height: 150px;
}
.content .rec_con ul li img{
width: 225px;
height: 150px;
}
.content .rec_con ul li .a-index{
width: 225px;
height: 150px;
top: 2px;
left: 2px;
line-height: 20px;
}
.content .rec_con ul li .a-index h2{
top: 0;
left: 0;
font-size: 1.7em;
line-height: 24px;
width: 98%;
height: 150px;
}
}
@media screen and (max-width: 980px){
.content{
width: 95%;
margin: 0 auto;
}
.content .rec_con ul li{
width: 160px;
padding: 2px;
margin: 0 6px;
height: 140px;
}
.content .rec_con ul li img{
width: 160px;
height: 140px;
}
.content .rec_con ul li .a-index{
width: 160px;
height: 140px;
top: 2px;
left: 2px;
line-height: 20px;
}
.content .rec_con ul li .a-index h2{
top: 0;
left: 0;
font-size: 1.6em;
line-height: 24px;
width: 98%;
height: 140px;
}
}
@media screen and (max-width: 720px){
.content{
width: 94%;
margin: 0 auto;
}
.content .rec_con ul li{
width: 255px;
height: 180px;
margin-top: 10px;
}
.content .rec_con ul li img{
width: 255px;
height: 180px;
}
.content .rec_con ul li .a-index{
width: 255px;
height: 180px;
line-height: 20px;
}
.content .rec_con ul li .a-index h2{
top: 0;
left: 0;
font-size: 1.8em;
line-height: 28px;
width: 98%;
height: 180px;
}
}
@media only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.0) and (orientation:landscape){
.content .rec_con ul li{
width: 240px;
height: 180px;
margin-top: 10px;
}
.content .rec_con ul li img{
width: 240px;
height: 180px;
}
.content .rec_con ul li .a-index{
width: 240px;
height: 180px;
line-height: 20px;
}
.content .rec_con ul li .a-index h2{
top: 0;
left: 0;
font-size: 1.8em;
line-height: 28px;
width: 98%;
height: 180px;
}
}
@media screen and (max-width: 480px){
.content{
width: 100%;
}
.content .rec_con ul li{
width: 45%;
height: 150px;
padding: 1%;
margin: 10px 1% 5px;
}
.content .rec_con ul li img{
width:100%;
height: 150px;
}
.content .rec_con ul li .a-index{
width: 98%;
left: 1%;
top: 2%;
height: 150px;
line-height: 20px;
}
.content .rec_con ul li .a-index h2{
top: 0;
left: 0;
font-size: 1.8em;
line-height: 28px;
width: 98%;
height: 150px;
}
}
@media screen and (max-width: 380px){
.content{
width: 240px;
}
.content .rec_con ul li{
width: 98%;
height: 160px;
padding: 1%;
margin-top: 10px;
}
.content .rec_con ul li img{
width: 100%;
height: 160px;
}
.content .rec_con ul li .a-index{
width:98%;
height: 160px;
line-height: 20px;
top: 1.5%;
left: 1.5%;
}
.content .rec_con ul li .a-index h2{
top: 0;
left: 0;
font-size: 1.8em;
line-height: 28px;
width: 98%;
height: 160px;
}
}
.progress_bar{
width: 98%;
border-radius: 4px;
background-color: #C6CBCB;
box-shadow: inset 0 1px 1px #c9c9c9,inset -1px 0 2px #b8b8b8;
display: block;
position: relative;
height: 5px;
padding: 0;
margin: 10px auto;
}
.progress_bar .progress_bar_x{
display: block;
width: 100%;
position: absolute;
z-index: 99;
top: 0;
bottom: 1px;
opacity: 0.9;
background-color: #5AB4F7;
border-radius: 8px 4px 4px 8px;
}
.waterfull{
margin: 0 auto;
}
.waterfull ul li{
float: left;
width: 284px;
padding: 8px;
margin: 0 6px 10px;
background: #fff;
border-radius: 3px;
position: relative;
overflow: hidden;
border:solid 1px #BCBCBC;
box-shadow: 0 0 10px #BCBCBC;
}
.waterfull ul li .a-img{
width: 284px;
display: block;
position: relative;
}
.waterfull ul li .a-img img{
width: 100%;
display: block;
min-height: 250px;
}
.waterfull ul li .li-title{
padding: 5px 0;
max-height: 48px;
overflow: hidden;
line-height: 24px;
color: #898686;
background: #fff;
}
.waterfull ul li .description{
padding: 5px 0;
max-height: 66px;
overflow: hidden;
line-height: 22px;
color: #898686;
font-size: 1.3em;
text-indent: 10px;
background: #fff;
}
.waterfull ul li .qianm{
background: #fff;
}
.sp1 span{
float: left;
color: #898686;
border:1px solid #F1F1F1;
padding: 2px;
margin-right: 5px;
}
5.外部js
css3-mediaqueries.js(可以自行网上下载)
if(typeof Object.create!=="function"){
Object.create=function(o){
function F(){
};
F.prototype=o;
return new F();
};
}
var ua={toString:function(){
return navigator.userAgent;
},test:function(s){
return this.toString().toLowerCase().indexOf(s.toLowerCase())>-1;
}};
ua.version=(ua.toString().toLowerCase().match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[])[1];
ua.webkit=ua.test("webkit");
ua.gecko=ua.test("gecko")&&!ua.webkit;
ua.opera=ua.test("opera");
ua.ie=ua.test("msie")&&!ua.opera;
ua.ie6=ua.ie&&document.compatMode&&typeof document.documentElement.style.maxHeight==="undefined";
ua.ie7=ua.ie&&document.documentElement&&typeof document.documentElement.style.maxHeight!=="undefined"&&typeof XDomainRequest==="undefined";
ua.ie8=ua.ie&&typeof XDomainRequest!=="undefined";
var domReady=function(){
var _1=[];
var _2=function(){
if(!arguments.callee.done){
arguments.callee.done=true;
for(var i=0;i<_1.length;i++){
_1[i]();
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",_2,false);
}
if(ua.ie){
(function(){
try{
document.documentElement.doScroll("left");
}
catch(e){
setTimeout(arguments.callee,50);
return;
}
_2();
})();
document.onreadystatechange=function(){
if(document.readyState==="complete"){
document.onreadystatechange=null;
_2();
}
};
}
if(ua.webkit&&document.readyState){
(function(){
if(document.readyState!=="loading"){
_2();
}else{
setTimeout(arguments.callee,10);
}
})();
}
window.onload=_2;
return function(fn){
if(typeof fn==="function"){
_1[_1.length]=fn;
}
return fn;
};
}();
var cssHelper=function(){
var _3={BLOCKS:/[^\s{][^{]*\{(?:[^{}]*\{[^{}]*\}[^{}]*|[^{}]*)*\}/g,BLOCKS_INSIDE:/[^\s{][^{]*\{[^{}]*\}/g,DECLARATIONS:/[a-zA-Z\-]+[^;]*:[^;]+;/g,RELATIVE_URLS:/url\(['"]?([^\/\)'"][^:\)'"]+)['"]?\)/g,REDUNDANT_COMPONENTS:/(?:\/\*([^*\\\\]|\*(?!\/))+\*\/|@import[^;]+;)/g,REDUNDANT_WHITESPACE:/\s*(,|:|;|\{|\})\s*/g,MORE_WHITESPACE:/\s{2,}/g,FINAL_SEMICOLONS:/;\}/g,NOT_WHITESPACE:/\S+/g};
var _4,_5=false;
var _6=[];
var _7=function(fn){
if(typeof fn==="function"){
_6[_6.length]=fn;
}
};
var _8=function(){
for(var i=0;i<_6.length;i++){
_6[i](_4);
}
};
var _9={};
var _a=function(n,v){
if(_9[n]){
var _b=_9[n].listeners;
if(_b){
for(var i=0;i<_b.length;i++){
_b[i](v);
}
}
}
};
var _c=function(_d,_e,_f){
if(ua.ie&&!window.XMLHttpRequest){
window.XMLHttpRequest=function(){
return new ActiveXObject("Microsoft.XMLHTTP");
};
}
if(!XMLHttpRequest){
return "";
}
var r=new XMLHttpRequest();
try{
r.open("get",_d,true);
r.setRequestHeader("X_REQUESTED_WITH","XMLHttpRequest");
}
catch(e){
_f();
return;
}
var _10=false;
setTimeout(function(){
_10=true;
},5000);
document.documentElement.style.cursor="progress";
r.onreadystatechange=function(){
if(r.readyState===4&&!_10){
if(!r.status&&location.protocol==="file:"||(r.status>=200&&r.status<300)||r.status===304||navigator.userAgent.indexOf("Safari")>-1&&typeof r.status==="undefined"){
_e(r.responseText);
}else{
_f();
}
document.documentElement.style.cursor="";
r=null;
}
};
r.send("");
};
var _11=function(_12){
_12=_12.replace(_3.REDUNDANT_COMPONENTS,"");
_12=_12.replace(_3.REDUNDANT_WHITESPACE,"$1");
_12=_12.replace(_3.MORE_WHITESPACE," ");
_12=_12.replace(_3.FINAL_SEMICOLONS,"}");
return _12;
};
var _13={mediaQueryList:function(s){
var o={};
var idx=s.indexOf("{");
var lt=s.substring(0,idx);
s=s.substring(idx+1,s.length-1);
var mqs=[],rs=[];
var qts=lt.toLowerCase().substring(7).split(",");
for(var i=0;i<qts.length;i++){
mqs[mqs.length]=_13.mediaQuery(qts[i],o);
}
var rts=s.match(_3.BLOCKS_INSIDE);
if(rts!==null){
for(i=0;i<rts.length;i++){
rs[rs.length]=_13.rule(rts[i],o);
}
}
o.getMediaQueries=function(){
return mqs;
};
o.getRules=function(){
return rs;
};
o.getListText=function(){
return lt;
};
o.getCssText=function(){
return s;
};
return o;
},mediaQuery:function(s,mql){
s=s||"";
var not=false,_14;
var exp=[];
var _15=true;
var _16=s.match(_3.NOT_WHITESPACE);
for(var i=0;i<_16.length;i++){
var _17=_16[i];
if(!_14&&(_17==="not"||_17==="only")){
if(_17==="not"){
not=true;
}
}else{
if(!_14){
_14=_17;
}else{
if(_17.charAt(0)==="("){
var _18=_17.substring(1,_17.length-1).split(":");
exp[exp.length]={mediaFeature:_18[0],value:_18[1]||null};
}
}
}
}
return {getList:function(){
return mql||null;
},getValid:function(){
return _15;
},getNot:function(){
return not;
},getMediaType:function(){
return _14;
},getExpressions:function(){
return exp;
}};
},rule:function(s,mql){
var o={};
var idx=s.indexOf("{");
var st=s.substring(0,idx);
var ss=st.split(",");
var ds=[];
var dts=s.substring(idx+1,s.length-1).split(";");
for(var i=0;i<dts.length;i++){
ds[ds.length]=_13.declaration(dts[i],o);
}
o.getMediaQueryList=function(){
return mql||null;
};
o.getSelectors=function(){
return ss;
};
o.getSelectorText=function(){
return st;
};
o.getDeclarations=function(){
return ds;
};
o.getPropertyValue=function(n){
for(var i=0;i<ds.length;i++){
if(ds[i].getProperty()===n){
return ds[i].getValue();
}
}
return null;
};
return o;
},declaration:function(s,r){
var idx=s.indexOf(":");
var p=s.substring(0,idx);
var v=s.substring(idx+1);
return {getRule:function(){
return r||null;
},getProperty:function(){
return p;
},getValue:function(){
return v;
}};
}};
var _19=function(el){
if(typeof el.cssHelperText!=="string"){
return;
}
var o={mediaQueryLists:[],rules:[],selectors:{},declarations:[],properties:{}};
var _1a=o.mediaQueryLists;
var ors=o.rules;
var _1b=el.cssHelperText.match(_3.BLOCKS);
if(_1b!==null){
for(var i=0;i<_1b.length;i++){
if(_1b[i].substring(0,7)==="@media "){
_1a[_1a.length]=_13.mediaQueryList(_1b[i]);
ors=o.rules=ors.concat(_1a[_1a.length-1].getRules());
}else{
ors[ors.length]=_13.rule(_1b[i]);
}
}
}
var oss=o.selectors;
var _1c=function(r){
var ss=r.getSelectors();
for(var i=0;i<ss.length;i++){
var n=ss[i];
if(!oss[n]){
oss[n]=[];
}
oss[n][oss[n].length]=r;
}
};
for(i=0;i<ors.length;i++){
_1c(ors[i]);
}
var ods=o.declarations;
for(i=0;i<ors.length;i++){
ods=o.declarations=ods.concat(ors[i].getDeclarations());
}
var ops=o.properties;
for(i=0;i<ods.length;i++){
var n=ods[i].getProperty();
if(!ops[n]){
ops[n]=[];
}
ops[n][ops[n].length]=ods[i];
}
el.cssHelperParsed=o;
_4[_4.length]=el;
return o;
};
var _1d=function(el,s){
el.cssHelperText=_11(s||el.innerHTML);
return _19(el);
};
var _1e=function(){
_5=true;
_4=[];
var _1f=[];
var _20=function(){
for(var i=0;i<_1f.length;i++){
_19(_1f[i]);
}
var _21=document.getElementsByTagName("style");
for(i=0;i<_21.length;i++){
_1d(_21[i]);
}
_5=false;
_8();
};
var _22=document.getElementsByTagName("link");
for(var i=0;i<_22.length;i++){
var _23=_22[i];
if(_23.getAttribute("rel").indexOf("style")>-1&&_23.href&&_23.href.length!==0&&!_23.disabled){
_1f[_1f.length]=_23;
}
}
if(_1f.length>0){
var c=0;
var _24=function(){
c++;
if(c===_1f.length){
_20();
}
};
var _25=function(_26){
var _27=_26.href;
_c(_27,function(_28){
_28=_11(_28).replace(_3.RELATIVE_URLS,"url("+_27.substring(0,_27.lastIndexOf("/"))+"/$1)");
_26.cssHelperText=_28;
_24();
},_24);
};
for(i=0;i<_1f.length;i++){
_25(_1f[i]);
}
}else{
_20();
}
};
var _29={mediaQueryLists:"array",rules:"array",selectors:"object",declarations:"array",properties:"object"};
var _2a={mediaQueryLists:null,rules:null,selectors:null,declarations:null,properties:null};
var _2b=function(_2c,v){
if(_2a[_2c]!==null){
if(_29[_2c]==="array"){
return (_2a[_2c]=_2a[_2c].concat(v));
}else{
var c=_2a[_2c];
for(var n in v){
if(v.hasOwnProperty(n)){
if(!c[n]){
c[n]=v[n];
}else{
c[n]=c[n].concat(v[n]);
}
}
}
return c;
}
}
};
var _2d=function(_2e){
_2a[_2e]=(_29[_2e]==="array")?[]:{};
for(var i=0;i<_4.length;i++){
_2b(_2e,_4[i].cssHelperParsed[_2e]);
}
return _2a[_2e];
};
domReady(function(){
var els=document.body.getElementsByTagName("*");
for(var i=0;i<els.length;i++){
els[i].checkedByCssHelper=true;
}
if(document.implementation.hasFeature("MutationEvents","2.0")||window.MutationEvent){
document.body.addEventListener("DOMNodeInserted",function(e){
var el=e.target;
if(el.nodeType===1){
_a("DOMElementInserted",el);
el.checkedByCssHelper=true;
}
},false);
}else{
setInterval(function(){
var els=document.body.getElementsByTagName("*");
for(var i=0;i<els.length;i++){
if(!els[i].checkedByCssHelper){
_a("DOMElementInserted",els[i]);
els[i].checkedByCssHelper=true;
}
}
},1000);
}
});
var _2f=function(d){
if(typeof window.innerWidth!="undefined"){
return window["inner"+d];
}else{
if(typeof document.documentElement!="undefined"&&typeof document.documentElement.clientWidth!="undefined"&&document.documentElement.clientWidth!=0){
return document.documentElement["client"+d];
}
}
};
return {addStyle:function(s,_30){
var el=document.createElement("style");
el.setAttribute("type","text/css");
document.getElementsByTagName("head")[0].appendChild(el);
if(el.styleSheet){
el.styleSheet.cssText=s;
}else{
el.appendChild(document.createTextNode(s));
}
el.addedWithCssHelper=true;
if(typeof _30==="undefined"||_30===true){
cssHelper.parsed(function(_31){
var o=_1d(el,s);
for(var n in o){
if(o.hasOwnProperty(n)){
_2b(n,o[n]);
}
}
_a("newStyleParsed",el);
});
}else{
el.parsingDisallowed=true;
}
return el;
},removeStyle:function(el){
return el.parentNode.removeChild(el);
},parsed:function(fn){
if(_5){
_7(fn);
}else{
if(typeof _4!=="undefined"){
if(typeof fn==="function"){
fn(_4);
}
}else{
_7(fn);
_1e();
}
}
},mediaQueryLists:function(fn){
cssHelper.parsed(function(_32){
fn(_2a.mediaQueryLists||_2d("mediaQueryLists"));
});
},rules:function(fn){
cssHelper.parsed(function(_33){
fn(_2a.rules||_2d("rules"));
});
},selectors:function(fn){
cssHelper.parsed(function(_34){
fn(_2a.selectors||_2d("selectors"));
});
},declarations:function(fn){
cssHelper.parsed(function(_35){
fn(_2a.declarations||_2d("declarations"));
});
},properties:function(fn){
cssHelper.parsed(function(_36){
fn(_2a.properties||_2d("properties"));
});
},broadcast:_a,addListener:function(n,fn){
if(typeof fn==="function"){
if(!_9[n]){
_9[n]={listeners:[]};
}
_9[n].listeners[_9[n].listeners.length]=fn;
}
},removeListener:function(n,fn){
if(typeof fn==="function"&&_9[n]){
var ls=_9[n].listeners;
for(var i=0;i<ls.length;i++){
if(ls[i]===fn){
ls.splice(i,1);
i-=1;
}
}
}
},getViewportWidth:function(){
return _2f("Width");
},getViewportHeight:function(){
return _2f("Height");
}};
}();
domReady(function enableCssMediaQueries(){
var _37;
var _38={LENGTH_UNIT:/[0-9]+(em|ex|px|in|cm|mm|pt|pc)$/,RESOLUTION_UNIT:/[0-9]+(dpi|dpcm)$/,ASPECT_RATIO:/^[0-9]+\/[0-9]+$/,ABSOLUTE_VALUE:/^[0-9]*(\.[0-9]+)*$/};
var _39=[];
var _3a=function(){
var id="css3-mediaqueries-test";
var el=document.createElement("p");
el.id=id;
var _3b=cssHelper.addStyle("@media all and (width) { #"+id+" { width: 1px !important; } }",false);
document.body.appendChild(el);
var ret=el.offsetWidth===1;
_3b.parentNode.removeChild(_3b);
el.parentNode.removeChild(el);
_3a=function(){
return ret;
};
return ret;
};
var _3c=function(){
_37=document.createElement("p");
_37.style.cssText="position:absolute;top:-9999em;left:-9999em;"+"margin:0;border:none;padding:0;width:1em;font-size:1em;";
document.body.appendChild(_37);
if(_37.offsetWidth!==16){
_37.style.fontSize=16/_37.offsetWidth+"em";
}
_37.style.width="";
};
var _3d=function(_3e){
_37.style.width=_3e;
var _3f=_37.offsetWidth;
_37.style.width="";
return _3f;
};
var _40=function(_41,_42){
var l=_41.length;
var min=(_41.substring(0,4)==="min-");
var max=(!min&&_41.substring(0,4)==="max-");
if(_42!==null){
var _43;
var _44;
if(_38.LENGTH_UNIT.exec(_42)){
_43="length";
_44=_3d(_42);
}else{
if(_38.RESOLUTION_UNIT.exec(_42)){
_43="resolution";
_44=parseInt(_42,10);
var _45=_42.substring((_44+"").length);
}else{
if(_38.ASPECT_RATIO.exec(_42)){
_43="aspect-ratio";
_44=_42.split("/");
}else{
if(_38.ABSOLUTE_VALUE){
_43="absolute";
_44=_42;
}else{
_43="unknown";
}
}
}
}
}
var _46,_47;
if("device-width"===_41.substring(l-12,l)){
_46=screen.width;
if(_42!==null){
if(_43==="length"){
return ((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44));
}else{
return false;
}
}else{
return _46>0;
}
}else{
if("device-height"===_41.substring(l-13,l)){
_47=screen.height;
if(_42!==null){
if(_43==="length"){
return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44));
}else{
return false;
}
}else{
return _47>0;
}
}else{
if("width"===_41.substring(l-5,l)){
_46=document.documentElement.clientWidth||document.body.clientWidth;
if(_42!==null){
if(_43==="length"){
return ((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44));
}else{
return false;
}
}else{
return _46>0;
}
}else{
if("height"===_41.substring(l-6,l)){
_47=document.documentElement.clientHeight||document.body.clientHeight;
if(_42!==null){
if(_43==="length"){
return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44));
}else{
return false;
}
}else{
return _47>0;
}
}else{
if("device-aspect-ratio"===_41.substring(l-19,l)){
return _43==="aspect-ratio"&&screen.width*_44[1]===screen.height*_44[0];
}else{
if("color-index"===_41.substring(l-11,l)){
var _48=Math.pow(2,screen.colorDepth);
if(_42!==null){
if(_43==="absolute"){
return ((min&&_48>=_44)||(max&&_48<_44)||(!min&&!max&&_48===_44));
}else{
return false;
}
}else{
return _48>0;
}
}else{
if("color"===_41.substring(l-5,l)){
var _49=screen.colorDepth;
if(_42!==null){
if(_43==="absolute"){
return ((min&&_49>=_44)||(max&&_49<_44)||(!min&&!max&&_49===_44));
}else{
return false;
}
}else{
return _49>0;
}
}else{
if("resolution"===_41.substring(l-10,l)){
var res;
if(_45==="dpcm"){
res=_3d("1cm");
}else{
res=_3d("1in");
}
if(_42!==null){
if(_43==="resolution"){
return ((min&&res>=_44)||(max&&res<_44)||(!min&&!max&&res===_44));
}else{
return false;
}
}else{
return res>0;
}
}else{
return false;
}
}
}
}
}
}
}
}
};
var _4a=function(mq){
var _4b=mq.getValid();
var _4c=mq.getExpressions();
var l=_4c.length;
if(l>0){
for(var i=0;i<l&&_4b;i++){
_4b=_40(_4c[i].mediaFeature,_4c[i].value);
}
var not=mq.getNot();
return (_4b&&!not||not&&!_4b);
}
};
var _4d=function(mql){
var mqs=mql.getMediaQueries();
var t={};
for(var i=0;i<mqs.length;i++){
if(_4a(mqs[i])){
t[mqs[i].getMediaType()]=true;
}
}
var s=[],c=0;
for(var n in t){
if(t.hasOwnProperty(n)){
if(c>0){
s[c++]=",";
}
s[c++]=n;
}
}
if(s.length>0){
_39[_39.length]=cssHelper.addStyle("@media "+s.join("")+"{"+mql.getCssText()+"}",false);
}
};
var _4e=function(_4f){
for(var i=0;i<_4f.length;i++){
_4d(_4f[i]);
}
if(ua.ie){
document.documentElement.style.display="block";
setTimeout(function(){
document.documentElement.style.display="";
},0);
setTimeout(function(){
cssHelper.broadcast("cssMediaQueriesTested");
},100);
}else{
cssHelper.broadcast("cssMediaQueriesTested");
}
};
var _50=function(){
for(var i=0;i<_39.length;i++){
cssHelper.removeStyle(_39[i]);
}
_39=[];
cssHelper.mediaQueryLists(_4e);
};
var _51=0;
var _52=function(){
var _53=cssHelper.getViewportWidth();
var _54=cssHelper.getViewportHeight();
if(ua.ie){
var el=document.createElement("p");
el.style.position="absolute";
el.style.top="-9999em";
el.style.overflow="scroll";
document.body.appendChild(el);
_51=el.offsetWidth-el.clientWidth;
document.body.removeChild(el);
}
var _55;
var _56=function(){
var vpw=cssHelper.getViewportWidth();
var vph=cssHelper.getViewportHeight();
if(Math.abs(vpw-_53)>_51||Math.abs(vph-_54)>_51){
_53=vpw;
_54=vph;
clearTimeout(_55);
_55=setTimeout(function(){
if(!_3a()){
_50();
}else{
cssHelper.broadcast("cssMediaQueriesTested");
}
},500);
}
};
window.onresize=function(){
var x=window.onresize||function(){
};
return function(){
x();
_56();
};
}();
};
var _57=document.documentElement;
_57.style.marginLeft="-32767px";
setTimeout(function(){
_57.style.marginTop="";
},20000);
return function(){
if(!_3a()){
cssHelper.addListener("newStyleParsed",function(el){
_4e(el.cssHelperParsed.mediaQueryLists);
});
cssHelper.addListener("cssMediaQueriesTested",function(){
if(ua.ie){
_57.style.width="1px";
}
setTimeout(function(){
_57.style.width="";
_57.style.marginLeft="";
},0);
cssHelper.removeListener("cssMediaQueriesTested",arguments.callee);
});
_3c();
_50();
}else{
_57.style.marginLeft="";
}
_52();
};
}());
try{
document.execCommand("BackgroundImageCache",false,true);
}
catch(e){
}
jQueryColor.js(可自行网上下载)
/*! jQuery Color v@2.1.2 https://github.com/jquery/jquery-color | jquery.org/license */
(function(a,b){function m(a,b,c){var d=h[b.type]||{};return a==null?c||!b.def?null:b.def:(a=d.floor?~~a:parseFloat(a),isNaN(a)?b.def:d.mod?(a+d.mod)%d.mod:0>a?0:d.max<a?d.max:a)}function n(b){var c=f(),d=c._rgba=[];return b=b.toLowerCase(),l(e,function(a,e){var f,h=e.re.exec(b),i=h&&e.parse(h),j=e.space||"rgba";if(i)return f=c[j](i),c[g[j].cache]=f[g[j].cache],d=c._rgba=f._rgba,!1}),d.length?(d.join()==="0,0,0,0"&&a.extend(d,k.transparent),c):k[b]}function o(a,b,c){return c=(c+1)%1,c*6<1?a+(b-a)*c*6:c*2<1?b:c*3<2?a+(b-a)*(2/3-c)*6:a}var c="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",d=/^([\-+])=\s*(\d+\.?\d*)/,e=[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1],a[2],a[3],a[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1]*2.55,a[2]*2.55,a[3]*2.55,a[4]]}},{re:/#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,parse:function(a){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}},{re:/#([a-f0-9])([a-f0-9])([a-f0-9])/,parse:function(a){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}},{re:/hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,space:"hsla",parse:function(a){return[a[1],a[2]/100,a[3]/100,a[4]]}}],f=a.Color=function(b,c,d,e){return new a.Color.fn.parse(b,c,d,e)},g={rgba:{props:{red:{idx:0,type:"byte"},green:{idx:1,type:"byte"},blue:{idx:2,type:"byte"}}},hsla:{props:{hue:{idx:0,type:"degrees"},saturation:{idx:1,type:"percent"},lightness:{idx:2,type:"percent"}}}},h={"byte":{floor:!0,max:255},percent:{max:1},degrees:{mod:360,floor:!0}},i=f.support={},j=a("<p>")[0],k,l=a.each;j.style.cssText="background-color:rgba(1,1,1,.5)",i.rgba=j.style.backgroundColor.indexOf("rgba")>-1,l(g,function(a,b){b.cache="_"+a,b.props.alpha={idx:3,type:"percent",def:1}}),f.fn=a.extend(f.prototype,{parse:function(c,d,e,h){if(c===b)return this._rgba=[null,null,null,null],this;if(c.jquery||c.nodeType)c=a(c).css(d),d=b;var i=this,j=a.type(c),o=this._rgba=[];d!==b&&(c=[c,d,e,h],j="array");if(j==="string")return this.parse(n(c)||k._default);if(j==="array")return l(g.rgba.props,function(a,b){o[b.idx]=m(c[b.idx],b)}),this;if(j==="object")return c instanceof f?l(g,function(a,b){c[b.cache]&&(i[b.cache]=c[b.cache].slice())}):l(g,function(b,d){var e=d.cache;l(d.props,function(a,b){if(!i[e]&&d.to){if(a==="alpha"||c[a]==null)return;i[e]=d.to(i._rgba)}i[e][b.idx]=m(c[a],b,!0)}),i[e]&&a.inArray(null,i[e].slice(0,3))<0&&(i[e][3]=1,d.from&&(i._rgba=d.from(i[e])))}),this},is:function(a){var b=f(a),c=!0,d=this;return l(g,function(a,e){var f,g=b[e.cache];return g&&(f=d[e.cache]||e.to&&e.to(d._rgba)||[],l(e.props,function(a,b){if(g[b.idx]!=null)return c=g[b.idx]===f[b.idx],c})),c}),c},_space:function(){var a=[],b=this;return l(g,function(c,d){b[d.cache]&&a.push(c)}),a.pop()},transition:function(a,b){var c=f(a),d=c._space(),e=g[d],i=this.alpha()===0?f("transparent"):this,j=i[e.cache]||e.to(i._rgba),k=j.slice();return c=c[e.cache],l(e.props,function(a,d){var e=d.idx,f=j[e],g=c[e],i=h[d.type]||{};if(g===null)return;f===null?k[e]=g:(i.mod&&(g-f>i.mod/2?f+=i.mod:f-g>i.mod/2&&(f-=i.mod)),k[e]=m((g-f)*b+f,d))}),this[d](k)},blend:function(b){if(this._rgba[3]===1)return this;var c=this._rgba.slice(),d=c.pop(),e=f(b)._rgba;return f(a.map(c,function(a,b){return(1-d)*e[b]+d*a}))},toRgbaString:function(){var b="rgba(",c=a.map(this._rgba,function(a,b){return a==null?b>2?1:0:a});return c[3]===1&&(c.pop(),b="rgb("),b+c.join()+")"},toHslaString:function(){var b="hsla(",c=a.map(this.hsla(),function(a,b){return a==null&&(a=b>2?1:0),b&&b<3&&(a=Math.round(a*100)+"%"),a});return c[3]===1&&(c.pop(),b="hsl("),b+c.join()+")"},toHexString:function(b){var c=this._rgba.slice(),d=c.pop();return b&&c.push(~~(d*255)),"#"+a.map(c,function(a){return a=(a||0).toString(16),a.length===1?"0"+a:a}).join("")},toString:function(){return this._rgba[3]===0?"transparent":this.toRgbaString()}}),f.fn.parse.prototype=f.fn,g.hsla.to=function(a){if(a[0]==null||a[1]==null||a[2]==null)return[null,null,null,a[3]];var b=a[0]/255,c=a[1]/255,d=a[2]/255,e=a[3],f=Math.max(b,c,d),g=Math.min(b,c,d),h=f-g,i=f+g,j=i*.5,k,l;return g===f?k=0:b===f?k=60*(c-d)/h+360:c===f?k=60*(d-b)/h+120:k=60*(b-c)/h+240,h===0?l=0:j<=.5?l=h/i:l=h/(2-i),[Math.round(k)%360,l,j,e==null?1:e]},g.hsla.from=function(a){if(a[0]==null||a[1]==null||a[2]==null)return[null,null,null,a[3]];var b=a[0]/360,c=a[1],d=a[2],e=a[3],f=d<=.5?d*(1+c):d+c-d*c,g=2*d-f;return[Math.round(o(g,f,b+1/3)*255),Math.round(o(g,f,b)*255),Math.round(o(g,f,b-1/3)*255),e]},l(g,function(c,e){var g=e.props,h=e.cache,i=e.to,j=e.from;f.fn[c]=function(c){i&&!this[h]&&(this[h]=i(this._rgba));if(c===b)return this[h].slice();var d,e=a.type(c),k=e==="array"||e==="object"?c:arguments,n=this[h].slice();return l(g,function(a,b){var c=k[e==="object"?a:b.idx];c==null&&(c=n[b.idx]),n[b.idx]=m(c,b)}),j?(d=f(j(n)),d[h]=n,d):f(n)},l(g,function(b,e){if(f.fn[b])return;f.fn[b]=function(f){var g=a.type(f),h=b==="alpha"?this._hsla?"hsla":"rgba":c,i=this[h](),j=i[e.idx],k;return g==="undefined"?j:(g==="function"&&(f=f.call(this,j),g=a.type(f)),f==null&&e.empty?this:(g==="string"&&(k=d.exec(f),k&&(f=j+parseFloat(k[2])*(k[1]==="+"?1:-1))),i[e.idx]=f,this[h](i)))}})}),f.hook=function(b){var c=b.split(" ");l(c,function(b,c){a.cssHooks[c]={set:function(b,d){var e,g,h="";if(d!=="transparent"&&(a.type(d)!=="string"||(e=n(d)))){d=f(e||d);if(!i.rgba&&d._rgba[3]!==1){g=c==="backgroundColor"?b.parentNode:b;while((h===""||h==="transparent")&&g&&g.style)try{h=a.css(g,"backgroundColor"),g=g.parentNode}catch(j){}d=d.blend(h&&h!=="transparent"?h:"_default")}d=d.toRgbaString()}try{b.style[c]=d}catch(j){}}},a.fx.step[c]=function(b){b.colorInit||(b.start=f(b.elem,c),b.end=f(b.end),b.colorInit=!0),a.cssHooks[c].set(b.elem,b.start.transition(b.end,b.pos))}})},f.hook(c),a.cssHooks.borderColor={expand:function(a){var b={};return l(["Top","Right","Bottom","Left"],function(c,d){b["border"+d+"Color"]=a}),b}},k=a.Color.names={aqua:"#00ffff",black:"#000000",blue:"#0000ff",fuchsia:"#ff00ff",gray:"#808080",green:"#008000",lime:"#00ff00",maroon:"#800000",navy:"#000080",olive:"#808000",purple:"#800080",red:"#ff0000",silver:"#c0c0c0",teal:"#008080",white:"#ffffff",yellow:"#ffff00",transparent:[null,null,null,0],_default:"#ffffff"}})(jQuery);
jquery.masonry.min.js(可自行网上下载)
/**
* jQuery Masonry v2.1.07
* A dynamic layout plugin for jQuery
* The flip-side of CSS Floats
* https://masonry.desandro.com
*
* Licensed under the MIT license.
* Copyright 2012 David DeSandro
*/
(function(a, b, c) {
"use strict";
var d = b.event,
e = b.event.handle ? "handle" : "dispatch",
f;
d.special.smartresize = {
setup: function() {
b(this).bind("resize", d.special.smartresize.handler)
},
teardown: function() {
b(this).unbind("resize", d.special.smartresize.handler)
},
handler: function(a, b) {
var c = this,
g = arguments;
a.type = "smartresize", f && clearTimeout(f), f = setTimeout(function() {
d[e].apply(c, g)
}, b === "execAsap" ? 0 : 100)
}
}, b.fn.smartresize = function(a) {
return a ? this.bind("smartresize", a) : this.trigger("smartresize", ["execAsap"])
}, b.Mason = function(a, c) {
this.element = b(c), this._create(a), this._init()
}, b.Mason.settings = {
isResizable: !0,
isAnimated: !1,
animationOptions: {
queue: !1,
duration: 500
},
gutterWidth: 0,
isRTL: !1,
isFitWidth: !1,
containerStyle: {
position: "relative"
}
}, b.Mason.prototype = {
_filterFindBricks: function(a) {
var b = this.options.itemSelector;
return b ? a.filter(b).add(a.find(b)) : a
},
_getBricks: function(a) {
var b = this._filterFindBricks(a).css({
position: "absolute"
}).addClass("masonry-brick");
return b
},
_create: function(c) {
this.options = b.extend(!0, {}, b.Mason.settings, c), this.styleQueue = [];
var d = this.element[0].style;
this.originalStyle = {
height: d.height || ""
};
var e = this.options.containerStyle;
for (var f in e) this.originalStyle[f] = d[f] || "";
this.element.css(e), this.horizontalDirection = this.options.isRTL ? "right" : "left";
var g = this.element.css("padding-" + this.horizontalDirection),
h = this.element.css("padding-top");
this.offset = {
x: g ? parseInt(g, 10) : 0,
y: h ? parseInt(h, 10) : 0
}, this.isFluid = this.options.columnWidth && typeof this.options.columnWidth == "function";
var i = this;
setTimeout(function() {
i.element.addClass("masonry")
}, 0), this.options.isResizable && b(a).bind("smartresize.masonry", function() {
i.resize()
}), this.reloadItems()
},
_init: function(a) {
this._getColumns(), this._reLayout(a)
},
option: function(a, c) {
b.isPlainObject(a) && (this.options = b.extend(!0, this.options, a))
},
layout: function(a, b) {
for (var c = 0, d = a.length; c < d; c++) this._placeBrick(a[c]);
var e = {};
e.height = Math.max.apply(Math, this.colYs);
if (this.options.isFitWidth) {
var f = 0;
c = this.cols;
while (--c) {
if (this.colYs[c] !== 0) break;
f++
}
e.width = (this.cols - f) * this.columnWidth - this.options.gutterWidth
}
this.styleQueue.push({
$el: this.element,
style: e
});
var g = this.isLaidOut ? this.options.isAnimated ? "animate" : "css" : "css",
h = this.options.animationOptions,
i;
for (c = 0, d = this.styleQueue.length; c < d; c++) i = this.styleQueue[c], i.$el[g](i.style, h);
this.styleQueue = [], b && b.call(a), this.isLaidOut = !0
},
_getColumns: function() {
var a = this.options.isFitWidth ? this.element.parent() : this.element,
b = a.width();
this.columnWidth = this.isFluid ? this.options.columnWidth(b) : this.options.columnWidth || this.$bricks.outerWidth(!0) || b, this.columnWidth += this.options.gutterWidth, this.cols = Math.floor((b + this.options.gutterWidth) / this.columnWidth), this.cols = Math.max(this.cols, 1)
},
_placeBrick: function(a) {
var c = b(a),
d, e, f, g, h;
d = Math.ceil(c.outerWidth(!0) / this.columnWidth), d = Math.min(d, this.cols);
if (d === 1) f = this.colYs;
else {
e = this.cols + 1 - d, f = [];
for (h = 0; h < e; h++) g = this.colYs.slice(h, h + d), f[h] = Math.max.apply(Math, g)
}
var i = Math.min.apply(Math, f),
j = 0;
for (var k = 0, l = f.length; k < l; k++)
if (f[k] === i) {
j = k;
break
}
var m = {
top: i + this.offset.y
};
m[this.horizontalDirection] = this.columnWidth * j + this.offset.x, this.styleQueue.push({
$el: c,
style: m
});
var n = i + c.outerHeight(!0),
o = this.cols + 1 - l;
for (k = 0; k < o; k++) this.colYs[j + k] = n
},
resize: function() {
var a = this.cols;
this._getColumns(), (this.isFluid || this.cols !== a) && this._reLayout()
},
_reLayout: function(a) {
var b = this.cols;
this.colYs = [];
while (b--) this.colYs.push(0);
this.layout(this.$bricks, a)
},
reloadItems: function() {
this.$bricks = this._getBricks(this.element.children())
},
reload: function(a) {
this.reloadItems(), this._init(a)
},
appended: function(a, b, c) {
if (b) {
this._filterFindBricks(a).css({
top: this.element.height()
});
var d = this;
setTimeout(function() {
d._appended(a, c)
}, 1)
} else this._appended(a, c)
},
_appended: function(a, b) {
var c = this._getBricks(a);
this.$bricks = this.$bricks.add(c), this.layout(c, b)
},
remove: function(a) {
this.$bricks = this.$bricks.not(a), a.remove()
},
destroy: function() {
this.$bricks.removeClass("masonry-brick").each(function() {
this.style.position = "", this.style.top = "", this.style.left = ""
});
var c = this.element[0].style;
for (var d in this.originalStyle) c[d] = this.originalStyle[d];
this.element.unbind(".masonry").removeClass("masonry").removeData("masonry"), b(a).unbind(".masonry")
}
}, b.fn.imagesLoaded = function(a) {
function h() {
a.call(c, d)
}
function i(a) {
var c = a.target;
c.src !== f && b.inArray(c, g) === -1 && (g.push(c), --e <= 0 && (setTimeout(h), d.unbind(".imagesLoaded", i)))
}
var c = this,
d = c.find("img").add(c.filter("img")),
e = d.length,
f = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",
g = [];
return e || h(), d.bind("load.imagesLoaded error.imagesLoaded", i).each(function() {
var a = this.src;
this.src = f, this.src = a
}), c
};
var g = function(b) {
a.console && a.console.error(b)
};
b.fn.masonry = function(a) {
if (typeof a == "string") {
var c = Array.prototype.slice.call(arguments, 1);
this.each(function() {
var d = b.data(this, "masonry");
if (!d) {
g("cannot call methods on masonry prior to initialization; attempted to call method '" + a + "'");
return
}
if (!b.isFunction(d[a]) || a.charAt(0) === "_") {
g("no such method '" + a + "' for masonry instance");
return
}
d[a].apply(d, c)
})
} else this.each(function() {
var c = b.data(this, "masonry");
c ? (c.option(a || {}), c._init()) : b.data(this, "masonry", new b.Mason(a, this))
});
return this
}
})(window, jQuery);
jQeasing.js(可自行网上下载)
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});