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

于 2017-12-13 18:29:54 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 前端就那么回事 文章标签： 瀑布流加载 JQ瀑布流加载 WEB瀑布流
前端就那么回事 专栏收录该内容
115 篇文章 18 订阅 ¥19.90 ¥99.00
订阅专栏

本文主要通过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: 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;
    }
});
吴维炜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
博客
认识大前端，开启无限可能
11-05 1万+
万丈高楼平地起。开课第一周，我们将以轻松幽默的方式，从实际工作中的开发痛点出发，以项目全生命周期为主线，对全栈有全局的认识。从整体项目分析开始，培养项目架构思维。一、了解大前端知识体系，有全局的认知1.1 工程师的技能树在大前端知识体系中，每个阶段的工程师，需要有不同的知识技能储备。江湖封号程序猿（媛），业内一般称呼软件开发工程师。1.1.1 初级工程师初级前端工程师的标准，就是能够完成日常的功能开发和debug，可以在已有的代码基础上做修改，优化和维护；熟练使用平时开发需要用到的工具即.
博客
你想成为什么样的人，你就要以什么样的标准来要求自己
09-03 5483
梦想还是要有的，没有梦想跟咸鱼有什么两样慎重的考虑了，最后给自己一个阶段的小目标——“前端第一人”主要职责： 1.准确理解产品需求、交互文档或原型, 进行 web 产品前端开发； 2.优化用户体验，修正项目中出现的问题； 3.与设计美工配合完成页面的静态化； 4.参与用户相关交互设计，配合后台开发人员，完成页面的交互功能，联调工作；自我要求： 1.精通 div+css......
博客
uniapp开发需求知识库
04-17 13
9.开发流程中，原型（后端可以开工）+高保真UI+UI上传蓝湖和切图（前端可以开工，前端再静态页开发大致占项目开发的30%工作量+接口集成占60%工作量+适配机型和bug调整约占10%工作量）6.uniapp开发难点，非视频模块和视频模块（官方目前对视频的支持不佳，开发成本和开发周期占比比较大，视频模块能做，但是h5预览不了，不好调试和测试）5.app微信登录（支持比较友好）app支付宝登录（官方目前不支持，需要原生开发支持）app第三方支付（官方目前不支持，需要原生开发支持）
博客
「Python大数据」数据采集-某东产品数据评论获取
04-17 268
本文主要介绍通过python实现数据采集、脚本开发、办公自动化。数据内容范围：星级评分是1-3分、获取数据页面是前50页。
博客
「AI工程师」模型训练与部署-工作指导
03-08 432
工作指导书一、工作职责负责AI模型的训练和优化，确保模型性能达到预定目标。协调资源的分配，管理训练过程中的各种参数和配置。负责模型的部署工作，确保模型能够稳定、高效地运行在实际环境中。监控模型的运行状态，及时处理和解决可能出现的问题。二、工作内容模型训练根据业务需求和数据特点，选择合适的算法和模型结构。准备训练数据，包括数据清洗、标注和增强等操作。配置训练参数，如学习率、批次大小等，并进行模型训练。监控训练过程，评估模型性能，并根据需要进行调优。模型优化使用交叉验
博客
「AI工程师」数据处理与分析-工作指导
03-08 205
工作指导书一、工作职责负责数据的收集、清洗、整合和处理，确保数据质量和准确性。进行数据分析和挖掘，提取有价值的信息，为业务决策提供支持。构建和维护数据处理和分析的流程和工具，提高数据处理效率。与其他团队成员合作，共同解决数据处理和分析过程中遇到的问题。二、工作内容数据收集与清洗根据业务需求，从各种数据源收集相关数据。对收集到的数据进行清洗，包括去重、填充缺失值、处理异常值等，确保数据的准确性和一致性。数据整合与处理将清洗后的数据进行整合，形成统一的数据格式和结构。根
博客
「AI工程师」算法研发与优化-工作指导
03-08 148
AI工程师在算法研发与优化任务中，需要遵循一定的工作指导书、工作规范和工作分解表，以确保工作的高效性和质量。
博客
「随笔」编程中的技术难题与挑战
12-02 437
由于不同的设备可能有不同的接口和协议，因此编写一个能在不同平台上运行的设备驱动程序是一个很大的挑战。解决这种问题需要程序员对各种设备的接口和协议有足够的了解，同时还需要对不同操作系统的设备驱动程序编写规范有足够的了解。例如，对于内存泄漏问题，程序员们可能会采用一些新的内存管理策略，如内存池等，来减少内存泄漏的可能性。对于跨平台兼容性问题，程序员们可能会采用一些跨平台的开发框架，如Qt等，来简化不同平台上的开发工作。其中，一些难题往往让人感到束手无策，如同一道道复杂的谜题，需要我们运用智慧和经验去解决。
博客
「随笔」AI——生活的新魔术师
12-02 526
人工智能，这个在过去看来还只是科幻电影中的概念，如今已深深地渗透到我们的日常生活中，就如同一位无所不能的魔术师，以其神奇的力量，让我们的生活变得更加便捷、智能。
博客
「随笔」IT行业哪个方向比较好就业
11-06 351
在当前的全球经济环境下，IT行业的发展迅速，就业前景广阔。以下从政治、经济、社会和科技四个维度对IT行业就业进行PEST分析。
博客
「随笔」浅谈2023年云计算的发展趋势
11-06 1251
在2023年，云计算的发展趋势将受到政治、经济、社会和科技四个维度的影响。
博客
「AI读书」第三期推荐《AI 3.0》
10-31 140
人工智能现在正深刻地影响着我们的生产与生活，甚至关系到人类未来的前途命运，但究竟什么是人工智能？人工智能背后的原理是什么？从问世到演化至今，人工智能经历了怎样的历史变迁？当下人工智能的能力边界在哪里？人工智能与人类智能的差异是什么？未来人工智能又将面对什么样的挑战和机遇？关于这些疑问，本书将为你一一揭晓答案。本书是超级畅销书《复杂》作者、复杂系统前沿科学家梅拉妮·米歇尔历经10年思考，厘清人工智能与人类智能的全新力作。
博客
「AI读书」第二期推荐《AIGC：智能创作时代》
10-27 246
这些作品的质量和风格与人类艺术家创作的作品难以区分，展示了AIGC在绘画领域的强大能力。例如，有一个名为“GPT-4”的AIGC模型，它可以根据用户的输入自动生成连贯的文本，而且生成的文本在语言和内容上都可以达到很高的质量。4. AIGC的挑战和未来发展，包括如何更好地利用AIGC技术提高数字媒体的质量、效率和用户体验，以及如何推动AI和AGI的发展，实现更广泛的社会价值。总之，《AIGC：智能创作时代》让我对人工智能在创作领域的应用有了全新的认识，对于科技与艺术的结合有了更深入的理解。
博客
「AI读书」第一期推荐《生命3.0》
10-25 182
《生命3.0》一书中，作者迈克斯·泰格马克对人类的终极未来进行了全方位的畅想，从我们能活到的近未来穿行至1万年乃至10 亿年及其以后，从可见的智能潜入不可见的意识，重新定义了“生命”“智能”“目标”“意识”，并澄清了常见的对人工智能的误解，将帮你构建起应对人工智能时代动态的全新思维框架，抓住人类与人工智能共生演化的焦点。
博客
「读书心得」程序员修炼之道
10-24 124
怎么样成为一个合格的程序员，以及怎样想出造出一个自己的程序，自己的代码。
博客
「AI人工智能」NodeJs使用openai流式请求与非流式请求
10-24 687
NodeJs使用openai流式请求与非流式请求。
博客
「AI人工智能」关于AI的灵魂发问
10-13 189
未来已至，AI正在颠覆我们的世界。AI对于当今全球来说，是影响力最大的质变因素。AI+和+AI到底有什么区别？
博客
「NodeJs」nodejs 定时任务
02-27 1215
nodejs 定时访问网页。
博客
「Vue2架构」Vue2实现区域预览和打印功能
02-22 484
Vue2实现区域预览和打印功能。
博客
「Vue3架构」Vue3实现区域预览和打印功能
02-22 417
本文主要介绍Vue3实现区域预览和打印功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值