前端小白--JQ瀑布流+流加载

本文主要通过JQ实现瀑布流加载和流加载

效果图如下：

1.前端代码.html

<!--瀑布流加载--><div class="content"><!-- 瀑布流样式开始 --><div class="waterfull clearfloat" id="waterfull">    <ul>    </ul></div><!-- loading按钮自己通过样式调整 --><div 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.....</div></div>

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("div");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("div");_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("div");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 http://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 * http://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: durationjQuery.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;    }});