以下是 jQuery Wookmark瀑布流特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Wookmark Plug-in Example</title>
<meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
<meta name="author" content="Christoph Ono, Sebastian Helzle">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS Reset -->
<link rel="stylesheet" href="../css/reset.css">
<!-- Global CSS for the page and tiles -->
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="container">
<header>
<h1>jQuery Wookmark Plug-in Example</h1>
<p>Resize the browser window or click a grid item to trigger layout updates.</p>
</header>
<div id="main" role="main">
<ul id="tiles">
<!-- These are our grid blocks -->
<li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
<li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
<li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
<li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
<li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
<li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
<li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
<li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
<li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>9</p></li>
<li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>10</p></li>
<li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>11</p></li>
<li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>12</p></li>
<li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>13</p></li>
<li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>14</p></li>
<li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>15</p></li>
<li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>16</p></li>
<li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>17</p></li>
<li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>18</p></li>
<li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>19</p></li>
<li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>20</p></li>
<li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>21</p></li>
<li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>22</p></li>
<li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>23</p></li>
<li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>24</p></li>
<li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>25</p></li>
<li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>26</p></li>
<li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>27</p></li>
<li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>28</p></li>
<li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>29</p></li>
<li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>30</p></li>
<!-- End of grid blocks -->
</ul>
</div>
</div>
<!-- include jQuery -->
<script src="../libs/jquery.min.js"></script>
<!-- Include the plug-in -->
<script src="../jquery.wookmark.js"></script>
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
(function ($){
var handler = $('#tiles li');
handler.wookmark({
// Prepare layout options.
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 5, // Optional, the distance between grid items
outerOffset: 10, // Optional, the distance to the containers border
itemWidth: 210 // Optional, the width of a grid item
});
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
})(jQuery);
</script>
</body>
</html>
JS代码(jquery.wookmark.min.js):
/*!jQuery wookmark plugin@name jquery.wookmark.js@author Christoph Ono (chri@sto.ph or @gbks)@author Sebastian Helzle (sebastian@helzle.net or @sebobo)@version 1.4.5@date 11/22/2013@category jQuery plugin@copyright (c) 2009-2013 Christoph Ono (www.wookmark.com)@license Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.*/
(function(t){
"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}
)(function(t){
function i(t){
n(function(){
var i,e;
for(i in t)e=t[i],e.obj.css(e.css)}
)}
function e(i){
return t.trim(i).toLowerCase()}
var s,h,o;
o=function(t,i){
return function(){
return t.apply(i,arguments)}
}
,h={
align:"center",autoResize:!1,comparator:null,container:t("body"),ignoreInactiveItems:!0,itemWidth:0,fillEmptySpace:!1,flexibleWidth:0,direction:void 0,offset:2,onLayoutChanged:void 0,outerOffset:0,resizeDelay:50,possibleFilters:[]}
;
var n=window.requestAnimationFrame||function(t){
t()}
;
s=function(){
function s(i,e){
this.handler=i,this.columns=this.containerWidth=this.resizeTimer=null,this.activeItemCount=0,this.itemHeightsDirty=!0,this.placeholders=[],t.extend(!0,this,h,e),this.update=o(this.update,this),this.onResize=o(this.onResize,this),this.onRefresh=o(this.onRefresh,this),this.getItemWidth=o(this.getItemWidth,this),this.layout=o(this.layout,this),this.layoutFull=o(this.layoutFull,this),this.layoutColumns=o(this.layoutColumns,this),this.filter=o(this.filter,this),this.clear=o(this.clear,this),this.getActiveItems=o(this.getActiveItems,this),this.refreshPlaceholders=o(this.refreshPlaceholders,this),this.sortElements=o(this.sortElements,this),this.updateFilterClasses=o(this.updateFilterClasses,this),this.updateFilterClasses(),this.autoResize&&t(window).bind("resize.wookmark",this.onResize),this.container.bind("refreshWookmark",this.onRefresh)}
return s.prototype.updateFilterClasses=function(){
for(var t,i,s,h,o=0,n=0,r=0,a={
}
,l=this.possibleFilters;
this.handler.length>o;
o++)if(i=this.handler.eq(o),t=i.data("filterClass"),"object"==typeof t&&t.length>0)for(n=0;
t.length>n;
n++)s=e(t[n]),a[s]||(a[s]=[]),a[s].push(i[0]);
for(;
l.length>r;
r++)h=e(l[r]),h in a||(a[h]=[]);
this.filterClasses=a}
,s.prototype.update=function(i){
this.itemHeightsDirty=!0,t.extend(!0,this,i)}
,s.prototype.onResize=function(){
clearTimeout(this.resizeTimer),this.itemHeightsDirty=0!==this.flexibleWidth,this.resizeTimer=setTimeout(this.layout,this.resizeDelay)}
,s.prototype.onRefresh=function(){
this.itemHeightsDirty=!0,this.layout()}
,s.prototype.filter=function(i,s){
var h,o,n,r,a,l=[],f=t();
if(i=i||[],s=s||"or",i.length){
for(o=0;
i.length>o;
o++)a=e(i[o]),a in this.filterClasses&&l.push(this.filterClasses[a]);
if(h=l.length,"or"==s||1==h)for(o=0;
h>o;
o++)f=f.add(l[o]);
else if("and"==s){
var u,c,d,m=l[0],p=!0;
for(o=1;
h>o;
o++)l[o].length<m.length&&(m=l[o]);
for(m=m||[],o=0;
m.length>o;
o++){
for(c=m[o],p=!0,n=0;
l.length>n&&p;
n++)if(d=l[n],m!=d){
for(r=0,u=!1;
d.length>r&&!u;
r++)u=d[r]==c;
p&=u}
p&&f.push(m[o])}
}
this.handler.not(f).addClass("inactive")}
else f=this.handler;
f.removeClass("inactive"),this.columns=null,this.layout()}
,s.prototype.refreshPlaceholders=function(i,e){
for(var s,h,o,n,r,a,l=this.placeholders.length,f=this.columns.length,u=this.container.innerHeight();
f>l;
l++)s=t('<div class="wookmark-placeholder"/>').appendTo(this.container),this.placeholders.push(s);
for(a=this.offset+2*parseInt(this.placeholders[0].css("borderLeftWidth"),10),l=0;
this.placeholders.length>l;
l++)if(s=this.placeholders[l],o=this.columns[l],l>=f||!o[o.length-1])s.css("display","none");
else{
if(h=o[o.length-1],!h)continue;
r=h.data("wookmark-top")+h.data("wookmark-height")+this.offset,n=u-r-a,s.css({
position:"absolute",display:n>0?"block":"none",left:l*i+e,top:r,width:i-a,height:n}
)}
}
,s.prototype.getActiveItems=function(){
return this.ignoreInactiveItems?this.handler.not(".inactive"):this.handler}
,s.prototype.getItemWidth=function(){
var t=this.itemWidth,i=this.container.width()-2*this.outerOffset,e=this.handler.eq(0),s=this.flexibleWidth;
if(void 0===this.itemWidth||0===this.itemWidth&&!this.flexibleWidth?t=e.outerWidth():"string"==typeof this.itemWidth&&this.itemWidth.indexOf("%")>=0&&(t=parseFloat(this.itemWidth)/100*i),s){
"string"==typeof s&&s.indexOf("%")>=0&&(s=parseFloat(s)/100*i);
var h=~~(.5+(i+this.offset)/(s+this.offset)),o=Math.min(s,~~((i-(h-1)*this.offset)/h));
t=Math.max(t,o),this.handler.css("width",t)}
return t}
,s.prototype.layout=function(t){
if(this.container.is(":visible")){
var i,e=this.getItemWidth()+this.offset,s=this.container.width(),h=s-2*this.outerOffset,o=~~((h+this.offset)/e),n=0,r=0,a=0,l=this.getActiveItems(),f=l.length;
if(this.itemHeightsDirty||!this.container.data("itemHeightsInitialized")){
for(;
f>a;
a++)i=l.eq(a),i.data("wookmark-height",i.outerHeight());
this.itemHeightsDirty=!1,this.container.data("itemHeightsInitialized",!0)}
o=Math.max(1,Math.min(o,f)),n=this.outerOffset,"center"==this.align&&(n+=~~(.5+(h-(o*e-this.offset))>>1)),this.direction=this.direction||("right"==this.align?"right":"left"),r=t||null===this.columns||this.columns.length!=o||this.activeItemCount!=f?this.layoutFull(e,o,n):this.layoutColumns(e,n),this.activeItemCount=f,this.container.css("height",r),this.fillEmptySpace&&this.refreshPlaceholders(e,n),void 0!==this.onLayoutChanged&&"function"==typeof this.onLayoutChanged&&this.onLayoutChanged()}
}
,s.prototype.sortElements=function(t){
return"function"==typeof this.comparator?t.sort(this.comparator):t}
,s.prototype.layoutFull=function(e,s,h){
var o,n,r=0,a=0,l=t.makeArray(this.getActiveItems()),f=l.length,u=null,c=null,d=[],m=[],p="left"==this.align?!0:!1;
for(this.columns=[],l=this.sortElements(l);
s>d.length;
)d.push(this.outerOffset),this.columns.push([]);
for(;
f>r;
r++){
for(o=t(l[r]),u=d[0],c=0,a=0;
s>a;
a++)u>d[a]&&(u=d[a],c=a);
o.data("wookmark-top",u),n=h,(c>0||!p)&&(n+=c*e),(m[r]={
obj:o,css:{
position:"absolute",top:u}
}
).css[this.direction]=n,d[c]+=o.data("wookmark-height")+this.offset,this.columns[c].push(o)}
return i(m),Math.max.apply(Math,d)}
,s.prototype.layoutColumns=function(t,e){
for(var s,h,o,n,r=[],a=[],l=0,f=0,u=0;
this.columns.length>l;
l++){
for(r.push(this.outerOffset),h=this.columns[l],n=l*t+e,s=r[l],f=0;
h.length>f;
f++,u++)o=h[f].data("wookmark-top",s),(a[u]={
obj:o,css:{
top:s}
}
).css[this.direction]=n,s+=o.data("wookmark-height")+this.offset;
r[l]=s}
return i(a),Math.max.apply(Math,r)}
,s.prototype.clear=function(){
clearTimeout(this.resizeTimer),t(window).unbind("resize.wookmark",this.onResize),this.container.unbind("refreshWookmark",this.onRefresh),this.handler.wookmarkInstance=null}
,s}
(),t.fn.wookmark=function(t){
return this.wookmarkInstance?this.wookmarkInstance.update(t||{
}
):this.wookmarkInstance=new s(this,t||{
}
),this.wookmarkInstance.layout(!0),this.show()}
}
);
JS代码(require.min.js):
var requirejs,require,define;
(function(ba){
function J(b){
return"[object Function]"===N.call(b)}
function K(b){
return"[object Array]"===N.call(b)}
function z(b,c){
if(b){
var d;
for(d=0;
d<b.length&&(!b[d]||!c(b[d],d,b));
d+=1);
}
}
function O(b,c){
if(b){
var d;
for(d=b.length-1;
-1<d&&(!b[d]||!c(b[d],d,b));
d-=1);
}
}
function t(b,c){
return ha.call(b,c)}
function m(b,c){
return t(b,c)&&b[c]}
function H(b,c){
for(var d in b)if(t(b,d)&&c(b[d],d))break}
function S(b,c,d,m){
c&&H(c,function(c,l){
if(d||!t(b,l))m&&"string"!==typeof c?(b[l]||(b[l]={
}
),S(b[l],c,d,m)):b[l]=c}
);
return b}
function v(b,c){
return function(){
return c.apply(b,arguments)}
}
function ca(b){
throw b;
}
function da(b){
if(!b)return b;
var c=ba;
z(b.split("."),function(b){
c=c[b]}
);
return c}
function B(b,c,d,m){
c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);
c.requireType=b;
c.requireModules=m;
d&&(c.originalError=d);
return c}
function ia(b){
function c(a,f,C){
var e,n,b,c,d,T,k,g=f&&f.split("/");
e=g;
var l=j.map,h=l&&l["*"];
if(a&&"."===a.charAt(0))if(f){
e=m(j.pkgs,f)?g=[f]:g.slice(0,g.length-1);
f=a=e.concat(a.split("/"));
for(e=0;
f[e];
e+=1)if(n=f[e],"."===n)f.splice(e,1),e-=1;
else if(".."===n)if(1===e&&(".."===f[2]||".."===f[0]))break;
else 0<e&&(f.splice(e-1,2),e-=2);
e=m(j.pkgs,f=a[0]);
a=a.join("/");
e&&a===f+"/"+e.main&&(a=f)}
else 0===a.indexOf("./")&&(a=a.substring(2));
if(C&&l&&(g||h)){
f=a.split("/");
for(e=f.length;
0<e;
e-=1){
b=f.slice(0,e).join("/");
if(g)for(n=g.length;
0<n;
n-=1)if(C=m(l,g.slice(0,n).join("/")))if(C=m(C,b)){
c=C;
d=e;
break}
if(c)break;
!T&&(h&&m(h,b))&&(T=m(h,b),k=e)}
!c&&T&&(c=T,d=k);
c&&(f.splice(0,d,c),a=f.join("/"))}
return a}
function d(a){
A&&z(document.getElementsByTagName("script"),function(f){
if(f.getAttribute("data-requiremodule")===a&&f.getAttribute("data-requirecontext")===k.contextName)return f.parentNode.removeChild(f),!0}
)}
function p(a){
var f=m(j.paths,a);
if(f&&K(f)&&1<f.length)return d(a),f.shift(),k.require.undef(a),k.require([a]),!0}
function g(a){
var f,b=a?a.indexOf("!"):-1;
-1<b&&(f=a.substring(0,b),a=a.substring(b+1,a.length));
return[f,a]}
function l(a,f,b,e){
var n,D,i=null,d=f?f.name:null,l=a,h=!0,j="";
a||(h=!1,a="_@r"+(N+=1));
a=g(a);
i=a[0];
a=a[1];
i&&(i=c(i,d,e),D=m(r,i));
a&&(i?j=D&&D.normalize?D.normalize(a,function(a){
return c(a,d,e)}
):c(a,d,e):(j=c(a,d,e),a=g(j),i=a[0],j=a[1],b=!0,n=k.nameToUrl(j)));
b=i&&!D&&!b?"_unnormalized"+(O+=1):"";
return{
prefix:i,name:j,parentMap:f,unnormalized:!!b,url:n,originalName:l,isDefine:h,id:(i?i+"!"+j:j)+b}
}
function s(a){
var f=a.id,b=m(q,f);
b||(b=q[f]=new k.Module(a));
return b}
function u(a,f,b){
var e=a.id,n=m(q,e);
if(t(r,e)&&(!n||n.defineEmitComplete))"defined"===f&&b(r[e]);
else if(n=s(a),n.error&&"error"===f)b(n.error);
else n.on(f,b)}
function w(a,f){
var b=a.requireModules,e=!1;
if(f)f(a);
else if(z(b,function(f){
if(f=m(q,f))f.error=a,f.events.error&&(e=!0,f.emit("error",a))}
),!e)h.onError(a)}
function x(){
U.length&&(ja.apply(I,[I.length-1,0].concat(U)),U=[])}
function y(a){
delete q[a];
delete W[a]}
function G(a,f,b){
var e=a.map.id;
a.error?a.emit("error",a.error):(f[e]=!0,z(a.depMaps,function(e,c){
var d=e.id,g=m(q,d);
g&&(!a.depMatched[c]&&!b[d])&&(m(f,d)?(a.defineDep(c,r[d]),a.check()):G(g,f,b))}
),b[e]=!0)}
function E(){
var a,f,b,e,n=(b=1E3*j.waitSeconds)&&k.startTime+b<(new Date).getTime(),c=[],i=[],g=!1,l=!0;
if(!X){
X=!0;
H(W,function(b){
a=b.map;
f=a.id;
if(b.enabled&&(a.isDefine||i.push(b),!b.error))if(!b.inited&&n)p(f)?g=e=!0:(c.push(f),d(f));
else if(!b.inited&&(b.fetched&&a.isDefine)&&(g=!0,!a.prefix))return l=!1}
);
if(n&&c.length)return b=B("timeout","Load timeout for modules:"+c,null,c),b.contextName=k.contextName,w(b);
l&&z(i,function(a){
G(a,{
}
,{
}
)}
);
if((!n||e)&&g)if((A||ea)&&!Y)Y=setTimeout(function(){
Y=0;
E()}
,50);
X=!1}
}
function F(a){
t(r,a[0])||s(l(a[0],null,!0)).init(a[1],a[2])}
function L(a){
var a=a.currentTarget||a.srcElement,b=k.onScriptLoad;
a.detachEvent&&!Z?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);
b=k.onScriptError;
(!a.detachEvent||Z)&&a.removeEventListener("error",b,!1);
return{
node:a,id:a&&a.getAttribute("data-requiremodule")}
}
function M(){
var a;
for(x();
I.length;
){
a=I.shift();
if(null===a[0])return w(B("mismatch","Mismatched anonymous define() module:"+a[a.length-1]));
F(a)}
}
var X,$,k,P,Y,j={
waitSeconds:7,baseUrl:"./",paths:{
}
,pkgs:{
}
,shim:{
}
,config:{
}
}
,q={
}
,W={
}
,aa={
}
,I=[],r={
}
,V={
}
,N=1,O=1;
P={
require:function(a){
return a.require?a.require:a.require=k.makeRequire(a.map)}
,exports:function(a){
a.usingExports=!0;
if(a.map.isDefine)return a.exports?a.exports:a.exports=r[a.map.id]={
}
}
,module:function(a){
return a.module?a.module:a.module={
id:a.map.id,uri:a.map.url,config:function(){
var b=m(j.pkgs,a.map.id);
return(b?m(j.config,a.map.id+"/"+b.main):m(j.config,a.map.id))||{
}
}
,exports:r[a.map.id]}
}
}
;
$=function(a){
this.events=m(aa,a.id)||{
}
;
this.map=a;
this.shim=m(j.shim,a.id);
this.depExports=[];
this.depMaps=[];
this.depMatched=[];
this.pluginMaps={
}
;
this.depCount=0}
;
$.prototype={
init:function(a,b,c,e){
e=e||{
}
;
if(!this.inited){
this.factory=b;
if(c)this.on("error",c);
else this.events.error&&(c=v(this,function(a){
this.emit("error",a)}
));
this.depMaps=a&&a.slice(0);
this.errback=c;
this.inited=!0;
this.ignore=e.ignore;
e.enabled||this.enabled?this.enable():this.check()}
}
,defineDep:function(a,b){
this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)}
,fetch:function(){
if(!this.fetched){
this.fetched=!0;
k.startTime=(new Date).getTime();
var a=this.map;
if(this.shim)k.makeRequire(this.map,{
enableBuildCallback:!0}
)(this.shim.deps||[],v(this,function(){
return a.prefix?this.callPlugin():this.load()}
));
else return a.prefix?this.callPlugin():this.load()}
}
,load:function(){
var a=this.map.url;
V[a]||(V[a]=!0,k.load(this.map.id,a))}
,check:function(){
if(this.enabled&&!this.enabling){
var a,b,c=this.map.id;
b=this.depExports;
var e=this.exports,n=this.factory;
if(this.inited)if(this.error)this.emit("error",this.error);
else{
if(!this.defining){
this.defining=!0;
if(1>this.depCount&&!this.defined){
if(J(n)){
if(this.events.error&&this.map.isDefine||h.onError!==ca)try{
e=k.execCb(c,n,b,e)}
catch(d){
a=d}
else e=k.execCb(c,n,b,e);
this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==this.exports?e=b.exports:void 0===e&&this.usingExports&&(e=this.exports));
if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}
else e=n;
this.exports=e;
if(this.map.isDefine&&!this.ignore&&(r[c]=e,h.onResourceLoad))h.onResourceLoad(k,this.map,this.depMaps);
y(c);
this.defined=!0}
this.defining=!1;
this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}
}
else this.fetch()}
}
,callPlugin:function(){
var a=this.map,b=a.id,d=l(a.prefix);
this.depMaps.push(d);
u(d,"defined",v(this,function(e){
var n,d;
d=this.map.name;
var g=this.map.parentMap?this.map.parentMap.name:null,C=k.makeRequire(a.parentMap,{
enableBuildCallback:!0}
);
if(this.map.unnormalized){
if(e.normalize&&(d=e.normalize(d,function(a){
return c(a,g,!0)}
)||""),e=l(a.prefix+"!"+d,this.map.parentMap),u(e,"defined",v(this,function(a){
this.init([],function(){
return a}
,null,{
enabled:!0,ignore:!0}
)}
)),d=m(q,e.id)){
this.depMaps.push(e);
if(this.events.error)d.on("error",v(this,function(a){
this.emit("error",a)}
));
d.enable()}
}
else n=v(this,function(a){
this.init([],function(){
return a}
,null,{
enabled:!0}
)}
),n.error=v(this,function(a){
this.inited=!0;
this.error=a;
a.requireModules=[b];
H(q,function(a){
0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)}
);
w(a)}
),n.fromText=v(this,function(e,c){
var d=a.name,g=l(d),i=Q;
c&&(e=c);
i&&(Q=!1);
s(g);
t(j.config,b)&&(j.config[d]=j.config[b]);
try{
h.exec(e)}
catch(D){
return w(B("fromtexteval","fromText eval for "+b+" failed:"+D,D,[b]))}
i&&(Q=!0);
this.depMaps.push(g);
k.completeLoad(d);
C([d],n)}
),e.load(a.name,C,n,j)}
));
k.enable(d,this);
this.pluginMaps[d.id]=d}
,enable:function(){
W[this.map.id]=this;
this.enabling=this.enabled=!0;
z(this.depMaps,v(this,function(a,b){
var c,e;
if("string"===typeof a){
a=l(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);
this.depMaps[b]=a;
if(c=m(P,a.id)){
this.depExports[b]=c(this);
return}
this.depCount+=1;
u(a,"defined",v(this,function(a){
this.defineDep(b,a);
this.check()}
));
this.errback&&u(a,"error",v(this,this.errback))}
c=a.id;
e=q[c];
!t(P,c)&&(e&&!e.enabled)&&k.enable(a,this)}
));
H(this.pluginMaps,v(this,function(a){
var b=m(q,a.id);
b&&!b.enabled&&k.enable(a,this)}
));
this.enabling=!1;
this.check()}
,on:function(a,b){
var c=this.events[a];
c||(c=this.events[a]=[]);
c.push(b)}
,emit:function(a,b){
z(this.events[a],function(a){
a(b)}
);
"error"===a&&delete this.events[a]}
}
;
k={
config:j,contextName:b,registry:q,defined:r,urlFetched:V,defQueue:I,Module:$,makeModuleMap:l,nextTick:h.nextTick,onError:w,configure:function(a){
a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");
var b=j.pkgs,c=j.shim,e={
paths:!0,config:!0,map:!0}
;
H(a,function(a,b){
e[b]?"map"===b?(j.map||(j.map={
}
),S(j[b],a,!0,!0)):S(j[b],a,!0):j[b]=a}
);
a.shim&&(H(a.shim,function(a,b){
K(a)&&(a={
deps:a}
);
if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=k.makeShimExports(a);
c[b]=a}
),j.shim=c);
a.packages&&(z(a.packages,function(a){
a="string"===typeof a?{
name:a}
:a;
b[a.name]={
name:a.name,location:a.location||a.name,main:(a.main||"main").replace(ka,"").replace(fa,"")}
}
),j.pkgs=b);
H(q,function(a,b){
!a.inited&&!a.map.unnormalized&&(a.map=l(b))}
);
if(a.deps||a.callback)k.require(a.deps||[],a.callback)}
,makeShimExports:function(a){
return function(){
var b;
a.init&&(b=a.init.apply(ba,arguments));
return b||a.exports&&da(a.exports)}
}
,makeRequire:function(a,f){
function d(e,c,g){
var i,j;
f.enableBuildCallback&&(c&&J(c))&&(c.__requireJsBuild=!0);
if("string"===typeof e){
if(J(c))return w(B("requireargs","Invalid require call"),g);
if(a&&t(P,e))return P[e](q[a.id]);
if(h.get)return h.get(k,e,a,d);
i=l(e,a,!1,!0);
i=i.id;
return!t(r,i)?w(B("notloaded",'Module name "'+i+'" has not been loaded yet for context:'+b+(a?"":". Use require([])"))):r[i]}
M();
k.nextTick(function(){
M();
j=s(l(null,a));
j.skipMap=f.skipMap;
j.init(e,c,g,{
enabled:!0}
);
E()}
);
return d}
f=f||{
}
;
S(d,{
isBrowser:A,toUrl:function(b){
var d,f=b.lastIndexOf("."),g=b.split("/")[0];
if(-1!==f&&(!("."===g||".."===g)||1<f))d=b.substring(f,b.length),b=b.substring(0,f);
return k.nameToUrl(c(b,a&&a.id,!0),d,!0)}
,defined:function(b){
return t(r,l(b,a,!1,!0).id)}
,specified:function(b){
b=l(b,a,!1,!0).id;
return t(r,b)||t(q,b)}
}
);
a||(d.undef=function(b){
x();
var c=l(b,a,!0),d=m(q,b);
delete r[b];
delete V[c.url];
delete aa[b];
d&&(d.events.defined&&(aa[b]=d.events),y(b))}
);
return d}
,enable:function(a){
m(q,a.id)&&s(a).enable()}
,completeLoad:function(a){
var b,c,e=m(j.shim,a)||{
}
,d=e.exports;
for(x();
I.length;
){
c=I.shift();
if(null===c[0]){
c[0]=a;
if(b)break;
b=!0}
else c[0]===a&&(b=!0);
F(c)}
c=m(q,a);
if(!b&&!t(r,a)&&c&&!c.inited){
if(j.enforceDefine&&(!d||!da(d)))return p(a)?void 0:w(B("nodefine","No define call for "+a,null,[a]));
F([a,e.deps||[],e.exportsFn])}
E()}
,nameToUrl:function(a,b,c){
var d,g,l,i,k,p;
if(h.jsExtRegExp.test(a))i=a+(b||"");
else{
d=j.paths;
g=j.pkgs;
i=a.split("/");
for(k=i.length;
0<k;
k-=1)if(p=i.slice(0,k).join("/"),l=m(g,p),p=m(d,p)){
K(p)&&(p=p[0]);
i.splice(0,k,p);
break}
else if(l){
a=a===l.name?l.location+"/"+l.main:l.location;
i.splice(0,k,a);
break}
i=i.join("/");
i+=b||(/\?/.test(i)||c?"":".js");
i=("/"===i.charAt(0)||i.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+i}
return j.urlArgs?i+((-1===i.indexOf("?")?"?":"&")+j.urlArgs):i}
,load:function(a,b){
h.load(k,a,b)}
,execCb:function(a,b,c,d){
return b.apply(d,c)}
,onScriptLoad:function(a){
if("load"===a.type||la.test((a.currentTarget||a.srcElement).readyState))R=null,a=L(a),k.completeLoad(a.id)}
,onScriptError:function(a){
var b=L(a);
if(!p(b.id))return w(B("scripterror","Script error for:"+b.id,a,[b.id]))}
}
;
k.require=k.makeRequire();
return k}
var h,x,y,E,L,F,R,M,s,ga,ma=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,na=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,fa=/\.js$/,ka=/^\.\//;
x=Object.prototype;
var N=x.toString,ha=x.hasOwnProperty,ja=Array.prototype.splice,A=!!("undefined"!==typeof window&&navigator&&window.document),ea=!A&&"undefined"!==typeof importScripts,la=A&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,Z="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),G={
}
,u={
}
,U=[],Q=!1;
if("undefined"===typeof define){
if("undefined"!==typeof requirejs){
if(J(requirejs))return;
u=requirejs;
requirejs=void 0}
"undefined"!==typeof require&&!J(require)&&(u=require,require=void 0);
h=requirejs=function(b,c,d,p){
var g,l="_";
!K(b)&&"string"!==typeof b&&(g=b,K(c)?(b=c,c=d,d=p):b=[]);
g&&g.context&&(l=g.context);
(p=m(G,l))||(p=G[l]=h.s.newContext(l));
g&&p.configure(g);
return p.require(b,c,d)}
;
h.config=function(b){
return h(b)}
;
h.nextTick="undefined"!==typeof setTimeout?function(b){
setTimeout(b,4)}
:function(b){
b()}
;
require||(require=h);
h.version="2.1.6";
h.jsExtRegExp=/^\/|:|\?|\.js$/;
h.isBrowser=A;
x=h.s={
contexts:G,newContext:ia}
;
h({
}
);
z(["toUrl","undef","defined","specified"],function(b){
h[b]=function(){
var c=G._;
return c.require[b].apply(c,arguments)}
}
);
if(A&&(y=x.head=document.getElementsByTagName("head")[0],E=document.getElementsByTagName("base")[0]))y=x.head=E.parentNode;
h.onError=ca;
h.load=function(b,c,d){
var h=b&&b.config||{
}
,g;
if(A)return g=h.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),g.type=h.scriptType||"text/javascript",g.charset="utf-8",g.async=!0,g.setAttribute("data-requirecontext",b.contextName),g.setAttribute("data-requiremodule",c),g.attachEvent&&!(g.attachEvent.toString&&0>g.attachEvent.toString().indexOf("[native code"))&&!Z?(Q=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1)),g.src=d,M=g,E?y.insertBefore(g,E):y.appendChild(g),M=null,g;
if(ea)try{
importScripts(d),b.completeLoad(c)}
catch(l){
b.onError(B("importscripts","importScripts failed for "+c+" at "+d,l,[c]))}
}
;
A&&O(document.getElementsByTagName("script"),function(b){
y||(y=b.parentNode);
if(L=b.getAttribute("data-main"))return s=L,u.baseUrl||(F=s.split("/"),s=F.pop(),ga=F.length?F.join("/")+"/":"./",u.baseUrl=ga),s=s.replace(fa,""),h.jsExtRegExp.test(s)&&(s=L),u.deps=u.deps?u.deps.concat(s):[s],!0}
);
define=function(b,c,d){
var h,g;
"string"!==typeof b&&(d=c,c=b,b=null);
K(c)||(d=c,c=null);
!c&&J(d)&&(c=[],d.length&&(d.toString().replace(ma,"").replace(na,function(b,d){
c.push(d)}
),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));
if(Q){
if(!(h=M))R&&"interactive"===R.readyState||O(document.getElementsByTagName("script"),function(b){
if("interactive"===b.readyState)return R=b}
),h=R;
h&&(b||(b=h.getAttribute("data-requiremodule")),g=G[h.getAttribute("data-requirecontext")])}
(g?g.defQueue:U).push([b,c,d])}
;
define.amd={
jQuery:!0}
;
h.exec=function(b){
return eval(b)}
;
h(u)}
}
)(this);
CSS代码(main.css):
/** General page styling **/
html{background-color:#e9e9e9;font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;}
#main{margin:30px 0;position:relative;}
header h1{text-align:center;font-size:24px;font-weight:normal;margin:30px 0 3px 0;}
header p{text-align:center;font-size:13px;color:#777;margin:0;}
/** * Grid container */
#tiles{list-style-type:none;position:relative;/** Needed to ensure items are laid out relative to this container **/
margin:0;padding:0;}
/** * Grid items */
#tiles li{width:200px;background-color:#ffffff;border:1px solid #dedede;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;display:none;/** Hide items initially to avoid a flicker effect **/
cursor:pointer;padding:4px;}
#tiles li.inactive{visibility:hidden;opacity:0;}
#tiles li img{display:block;}
/** * Grid item text */
#tiles li p{color:#666;font-size:12px;margin:7px 0 0 7px;}
footer{text-align:center;}
footer a{color:#435DC5;text-decoration:none;}
/** * Progress bar for imagesLoaded */
.progress-bar{background-color:#0BC20B;height:2px;position:absolute;top:0;left:0;right:0;width:0;box-shadow:0 1px 3px rgba(11,194,11,0.2);-webkit-transition:width 0.3s ease-out;-moz-transition:width 0.3s ease-out;-o-transition:width 0.3s ease-out;transition:width 0.3s ease-out;}
/** * Placerholder css */
.wookmark-placeholder{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background-color:#eee;border:1px solid #dedede;z-index:-1;}
.example-tiles{position:relative;/** Needed to ensure items are laid out relative to this container **/
margin:0;padding:0;}
.example-tiles li{display:block;list-style-type:none;float:left;margin:5px;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.example-tiles a,.example-tiles a:hover{color:#555;background-color:#eee;text-align:center;display:table-cell;vertical-align:middle;width:200px;height:200px;font-size:2em;font-weight:bold;text-decoration:none;border:1px solid #ddd;box-shadow:0 1px 3px rgba(0,0,0,0.4);padding:5px 8px;border-radius:3px;}
.example-tiles a:hover{background-color:#ddd;}
分享到QQ
分享到微博
微信扫一扫
