以下是 jquery+css3实现瀑布流照片墙特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery+css3实现瀑布流照片墙特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="content">
<div class="iw_wrapper">
<ul class="iw_thumbs" id="iw_thumbs">
<li><img src="images/1.jpg" data-img="images/1.jpg" alt="Thumb1"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/2.jpg" data-img="images/2.jpg" alt="Thumb2"/>
<div>
<h2>Silence</h2>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
</div>
</li>
<li><img src="images/3.jpg" data-img="images/3.jpg" alt="Thumb3"/>
<div>
<h2>Abstraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/8.jpg" data-img="images/8.jpg" alt="Thumb8"/>
<div>
<h2>Happiness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/9.jpg" data-img="images/9.jpg" alt="Thumb9"/>
<div>
<h2>Greatness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/10.jpg" data-img="images/10.jpg" alt="Thumb10"/>
<div>
<h2>Abstraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/6.jpg" data-img="images/6.jpg" alt="Thumb6"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/7.jpg" data-img="images/7.jpg" alt="Thumb7"/>
<div>
<h2>Beauty</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/8.jpg" data-img="images/8.jpg" alt="Thumb8"/>
<div>
<h2>Happiness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/12.jpg" data-img="images/12.jpg" alt="Thumb12"/>
<div>
<h2>Greatness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/4.jpg" data-img="images/4.jpg" alt="Thumb4"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/5.jpg" data-img="images/5.jpg" alt="Thumb5"/>
<div>
<h2>Growth</h2>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</li>
<li><img src="images/6.jpg" data-img="images/6.jpg" alt="Thumb6"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/7.jpg" data-img="images/7.jpg" alt="Thumb7"/>
<div>
<h2>Beauty</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/10.jpg" data-img="images/10.jpg" alt="Thumb10"/>
<div>
<h2>Abstraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/11.jpg" data-img="images/11.jpg" alt="Thumb11"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/3.jpg" data-img="images/3.jpg" alt="Thumb3"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/13.jpg" data-img="images/13.jpg" alt="Thumb13"/>
<div>
<h2>Happiness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/14.jpg" data-img="images/14.jpg" alt="Thumb14"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/2.jpg" data-img="images/2.jpg" alt="Thumb1"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/4.jpg" data-img="images/4.jpg" alt="Thumb2"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/11.jpg" data-img="images/11.jpg" alt="Thumb11"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/12.jpg" data-img="images/12.jpg" alt="Thumb12"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/13.jpg" data-img="images/13.jpg" alt="Thumb13"/>
<div>
<h2>Happiness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/14.jpg" data-img="images/14.jpg" alt="Thumb14"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/2.jpg" data-img="images/2.jpg" alt="Thumb1"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/4.jpg" data-img="images/4.jpg" alt="Thumb2"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/6.jpg" data-img="images/6.jpg" alt="Thumb3"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/8.jpg" data-img="images/8.jpg" alt="Thumb4"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/12.jpg" data-img="images/12.jpg" alt="Thumb1"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/2.jpg" data-img="images/2.jpg" alt="Thumb2"/>
<div>
<h2>Silence</h2>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
</div>
</li>
<li><img src="images/3.jpg" data-img="images/3.jpg" alt="Thumb3"/>
<div>
<h2>Abstraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/4.jpg" data-img="images/4.jpg" alt="Thumb4"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/5.jpg" data-img="images/5.jpg" alt="Thumb5"/>
<div>
<h2>Growth</h2>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</li>
<li><img src="images/6.jpg" data-img="images/6.jpg" alt="Thumb6"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/7.jpg" data-img="images/7.jpg" alt="Thumb7"/>
<div>
<h2>Beauty</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/8.jpg" data-img="images/8.jpg" alt="Thumb8"/>
<div>
<h2>Happiness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/9.jpg" data-img="images/9.jpg" alt="Thumb9"/>
<div>
<h2>Greatness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/10.jpg" data-img="images/10.jpg" alt="Thumb10"/>
<div>
<h2>Abstraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/11.jpg" data-img="images/11.jpg" alt="Thumb11"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/12.jpg" data-img="images/12.jpg" alt="Thumb11"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/13.jpg" data-img="images/13.jpg" alt="Thumb11"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/14.jpg" data-img="images/14.jpg" alt="Thumb11"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/16.jpg" data-img="images/16.jpg" alt="Thumb11"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/1.jpg" data-img="images/1.jpg" alt="Thumb12"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/13.jpg" data-img="images/13.jpg" alt="Thumb13"/>
<div>
<h2>Happiness</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/14.jpg" data-img="images/14.jpg" alt="Thumb14"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/2.jpg" data-img="images/2.jpg" alt="Thumb1"/>
<div>
<h2>Virtue</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/4.jpg" data-img="images/4.jpg" alt="Thumb2"/>
<div>
<h2>Serenity</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
<li><img src="images/6.jpg" data-img="images/6.jpg" alt="Thumb3"/>
<div>
<h2>Attraction</h2>
<p>Far far away, behind the word mountains there live the blind texts.</p>
</div>
</li>
</ul>
</div>
<div id="iw_ribbon" class="iw_ribbon"> <span class="iw_close"></span> <span class="iw_zoom">Click thumb to zoom</span> </div>
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $iw_thumbs = $('#iw_thumbs'),
$iw_ribbon = $('#iw_ribbon'),
$iw_ribbon_close = $iw_ribbon.children('span.iw_close'),
$iw_ribbon_zoom = $iw_ribbon.children('span.iw_zoom');
ImageWall = (function() {
// window width and height
var w_dim,
// index of current image
current = -1,
isRibbonShown = false,
isFullMode = false,
// ribbon / images animation settings
ribbonAnim = {speed : 500, easing : 'easeOutExpo'},
imgAnim = {speed : 400, easing : 'jswing'},
// init function : call masonry, calculate window dimentions, initialize some events
init = function() {
$iw_thumbs.imagesLoaded(function(){
$iw_thumbs.masonry({
isAnimated : true
});
});
getWindowsDim();
initEventsHandler();
},
// calculate window dimentions
getWindowsDim = function() {
w_dim = {
width : $(window).width(),
height : $(window).height()
};
},
// initialize some events
initEventsHandler = function() {
// click on a image
$iw_thumbs.delegate('li', 'click', function() {
if($iw_ribbon.is(':animated')) return false;
var $el = $(this);
if($el.data('ribbon')) {
showFullImage($el);
}
else if(!isRibbonShown) {
isRibbonShown = true;
$el.data('ribbon',true);
// set the current
current = $el.index();
showRibbon($el);
}
});
// click ribbon close
$iw_ribbon_close.bind('click', closeRibbon);
// on window resize we need to recalculate the window dimentions
$(window).bind('resize', function() {
getWindowsDim();
if($iw_ribbon.is(':animated'))
return false;
closeRibbon();
})
.bind('scroll', function() {
if($iw_ribbon.is(':animated'))
return false;
closeRibbon();
});
},
showRibbon = function($el) {
var $img = $el.children('img'),
$descrp = $img.next();
// fadeOut all the other images
$iw_thumbs.children('li').not($el).animate({opacity : 0.2}, imgAnim.speed);
// increase the image z-index, and set the height to 100px (default height)
$img.css('z-index', 100)
.data('originalHeight',$img.height())
.stop()
.animate({
height : '100px'
}, imgAnim.speed, imgAnim.easing);
// the ribbon will animate from the left or right
// depending on the position of the image
var ribbonCssParam = {
top : $el.offset().top - $(window).scrollTop() - 6 + 'px'
},
descriptionCssParam,
dir;
if( $el.offset().left < (w_dim.width / 2) ) {
dir = 'left';
ribbonCssParam.left = 0;
ribbonCssParam.right = 'auto';
}
else {
dir = 'right';
ribbonCssParam.right = 0;
ribbonCssParam.left = 'auto';
}
$iw_ribbon.css(ribbonCssParam)
.show()
.stop()
.animate({width : '100%'}, ribbonAnim.speed, ribbonAnim.easing, function() {
switch(dir) {
case 'left' :
descriptionCssParam = {
'left' : $img.outerWidth(true) + 'px',
'text-align' : 'left'
};
break;
case 'right' :
descriptionCssParam = {
'left' : '-200px',
'text-align' : 'right'
};
break;
};
$descrp.css(descriptionCssParam).fadeIn();
// show close button and zoom
$iw_ribbon_close.show();
$iw_ribbon_zoom.show();
});
},
// close the ribbon
// when in full mode slides in the middle of the page
// when not slides left
closeRibbon = function() {
isRibbonShown = false
$iw_ribbon_close.hide();
$iw_ribbon_zoom.hide();
if(!isFullMode) {
// current wall image
var $el = $iw_thumbs.children('li').eq(current);
resetWall($el);
// slide out ribbon
$iw_ribbon.stop()
.animate({width : '0%'}, ribbonAnim.speed, ribbonAnim.easing);
}
else {
$iw_ribbon.stop().animate({
opacity : 0.8,
height : '0px',
marginTop : w_dim.height/2 + 'px' // half of window height
}, ribbonAnim.speed, function() {
$iw_ribbon.css({
'width' : '0%',
'height' : '126px',
'margin-top': '0px'
}).children('img').remove();
});
isFullMode = false;
}
},
resetWall = function($el) {
var $img = $el.children('img'),
$descrp = $img.next();
$el.data('ribbon',false);
// reset the image z-index and height
$img.css('z-index',1).stop().animate({
height : $img.data('originalHeight')
}, imgAnim.speed,imgAnim.easing);
// fadeOut the description
$descrp.fadeOut();
// fadeIn all the other images
$iw_thumbs.children('li').not($el).animate({opacity : 1}, imgAnim.speed);
},
showFullImage = function($el) {
isFullMode = true;
$iw_ribbon_close.hide();
var $img = $el.children('img'),
large = $img.data('img'),
// add a loading image on top of the image
$loading = $('<span class="iw_loading"></span>');
$el.append($loading);
// preload large image
$('<img/>').load(function() {
var $largeImage = $(this);
$loading.remove();
$iw_ribbon_zoom.hide();
resizeImage($largeImage);
// reset the current image in the wall
resetWall($el);
// animate ribbon in and out
$iw_ribbon.stop().animate({
opacity : 1,
height : '0px',
marginTop : '63px' // half of ribbons height
}, ribbonAnim.speed, function() {
// add the large image to the DOM
$iw_ribbon.prepend($largeImage);
$iw_ribbon_close.show();
$iw_ribbon.animate({
height : '100%',
marginTop : '0px',
top : '0px'
}, ribbonAnim.speed);
});
}).attr('src',large);
},
resizeImage = function($image) {
var widthMargin = 100,
heightMargin = 100,
windowH = w_dim.height - heightMargin,
windowW = w_dim.width - widthMargin,
theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width,
imgheight = theImage.height;
if((imgwidth > windowW) || (imgheight > windowH)) {
if(imgwidth > imgheight) {
var newwidth = windowW,
ratio = imgwidth / windowW,
newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width = newwidth;
if(newheight > windowH) {
var newnewheight = windowH,
newratio = newheight/windowH,
newnewwidth = newwidth/newratio;
theImage.width = newnewwidth;
theImage.height = newnewheight;
}
}
else {
var newheight = windowH,
ratio = imgheight / windowH,
newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width = newwidth;
if(newwidth > windowW) {
var newnewwidth = windowW,
newratio = newwidth/windowW,
newnewheight = newheight/newratio;
theImage.height = newnewheight;
theImage.width = newnewwidth;
}
}
}
$image.css({
'width' : theImage.width + 'px',
'height' : theImage.height + 'px',
'margin-left' : -theImage.width / 2 + 'px',
'margin-top' : -theImage.height / 2 + 'px'
});
};
return {init : init};
})();
ImageWall.init();
});
</script>
</body>
</html>
JS代码(jquery.masonry.min.js):
/** * jQuery Masonry v2.0.110524 * A dynamic layout plugin for jQuery * The flip-side of CSS Floats * http://masonry.desandro.com * * Licensed under the MIT license. * Copyright 2011 David DeSandro */
(function(a,b,c){
var d=b.event,e;
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,d=arguments;
a.type="smartresize",e&&clearTimeout(e),e=setTimeout(function(){
jQuery.event.handle.apply(c,d)}
,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()}
;
var f=["position","height"];
b.Mason.settings={
isResizable:!0,isAnimated:!1,animationOptions:{
queue:!1,duration:500}
,gutterWidth:0,isRTL:!1,isFitWidth:!1}
,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=[],this.reloadItems();
var d=this.element[0].style;
this.originalStyle={
}
;
for(var e=0,g=f.length;
e<g;
e++){
var h=f[e];
this.originalStyle[h]=d[h]||null}
this.element.css({
position:"relative"}
),this.horizontalDirection=this.options.isRTL?"right":"left",this.offset={
}
;
var i=b(document.createElement("div"));
this.element.prepend(i),this.offset.y=Math.round(i.position().top),this.options.isRTL?(i.css({
"float":"right",display:"inline-block"}
),this.offset.x=Math.round(this.element.outerWidth()-i.position().left)):this.offset.x=Math.round(i.position().left),i.remove();
var j=this;
setTimeout(function(){
j.element.addClass("masonry")}
,0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){
j.resize()}
)}
,_init:function(a){
this._getColumns("masonry"),this._reLayout(a)}
,option:function(a,c){
b.isPlainObject(a)&&(this.options=b.extend(!0,this.options,a))}
,layout:function(a,c){
var d,e,f,g,h,i;
for(var j=0,k=a.length;
j<k;
j++){
d=b(a[j]),e=Math.ceil(d.outerWidth(!0)/this.columnWidth),e=Math.min(e,this.cols);
if(e===1)this._placeBrick(d,this.colYs);
else{
f=this.cols+1-e,g=[];
for(i=0;
i<f;
i++)h=this.colYs.slice(i,i+e),g[i]=Math.max.apply(Math,h);
this._placeBrick(d,g)}
}
var l={
}
;
l.height=Math.max.apply(Math,this.colYs)-this.offset.y,this.options.isFitWidth&&(l.width=this.cols*this.columnWidth-this.options.gutterWidth),this.styleQueue.push({
$el:this.element,style:l}
);
var m=this.isLaidOut?this.options.isAnimated?"animate":"css":"css",n=this.options.animationOptions,o;
for(j=0,k=this.styleQueue.length;
j<k;
j++)o=this.styleQueue[j],o.$el[m](o.style,n);
this.styleQueue=[],c&&c.call(a),this.isLaidOut=!0}
,_getColumns:function(){
var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();
this.columnWidth=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,b){
var c=Math.min.apply(Math,b),d=0;
for(var e=0,f=b.length;
e<f;
e++)if(b[e]===c){
d=e;
break}
var g={
top:c}
;
g[this.horizontalDirection]=this.columnWidth*d+this.offset.x,this.styleQueue.push({
$el:a,style:g}
);
var h=c+a.outerHeight(!0),i=this.cols+1-f;
for(e=0;
e<i;
e++)this.colYs[d+e]=h}
,resize:function(){
var a=this.cols;
this._getColumns("masonry"),this.cols!==a&&this._reLayout()}
,_reLayout:function(a){
var b=this.cols;
this.colYs=[];
while(b--)this.colYs.push(this.offset.y);
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=null,this.style.top=null,this.style.left=null}
);
var c=this.element[0].style;
for(var d=0,e=f.length;
d<e;
d++){
var g=f[d];
c[g]=this.originalStyle[g]}
this.element.unbind(".masonry").removeClass("masonry").removeData("masonry"),b(a).unbind(".masonry")}
}
,b.fn.imagesLoaded=function(a){
var b=this.find("img"),d=b.length,e="data:image/gif;
base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",f=this;
if(!d){
a.call(this);
return this}
b.bind("load",function(){
--d<=0&&this.src!==e&&a.call(f)}
).each(function(){
if(this.complete||this.complete===c){
var a=this.src;
this.src=e,this.src=a}
}
);
return this}
,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)return b.error("cannot call methods on masonry prior to initialization;
attempted to call method '"+a+"'");
if(!b.isFunction(d[a])||a.charAt(0)==="_")return b.error("no such method '"+a+"' for masonry instance");
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);
CSS代码(style.css):
@import url('reset.css');body{background:#f7f7f7 url(../images/pinstripe.gif) repeat top left;color:#000;font-family:Georgia,"Times New Roman",sans-serif;font-size:12px;}
a{color:#000;text-decoration:none;}
header h1{margin:10px 0 0 20px;font-size:100px;text-transform:uppercase;text-shadow:0px 0px 1px #fff;color:#444;font-family:'Wire One',arial,serif;}
header span{font-style:italic;margin:-10px 0 10px 188px;display:block;color:#555;text-shadow:1px 1px 1px #fff;}
.iw_wrapper{width:70%;margin:30px auto 100px auto;position:relative;}
ul.iw_thumbs li{float:left;margin:5px;}
ul.iw_thumbs li div{position:absolute;top:5px;width:180px;padding:0px 10px;display:none;color:#fff;z-index:100;}
ul.iw_thumbs li div h2{font-family:'Wire One',arial,serif;font-size:38px;text-transform:uppercase;text-shadow:0px 0px 1px #fff;}
ul.iw_thumbs li div p{font-size:11px;line-height:16px;font-style:italic;}
ul.iw_thumbs li:nth-child(1){margin-left:50px;}
ul.iw_thumbs li:nth-child(even){margin-top:30px;}
ul.iw_thumbs li:nth-child(3n){margin-left:20px;}
ul.iw_thumbs li img{border:7px solid #fff;cursor:pointer;position:relative;-moz-box-shadow:1px 1px 1px #aaa;-webkit-box-shadow:1px 1px 1px #aaa;box-shadow:1px 1px 1px #aaa;}
ul.iw_thumbs li img:hover{-moz-box-shadow:1px 1px 7px #777;-webkit-box-shadow:1px 1px 7px #777;box-shadow:1px 1px 7px #777;}
ul.iw_thumbs li:nth-child(even) img{height:20px;}
ul.iw_thumbs li:nth-child(odd) img{height:40px;}
ul.iw_thumbs li:nth-child(5n) img{height:70px;}
ul.iw_thumbs li:nth-child(6n) img{height:110px;}
ul.iw_thumbs li:nth-child(7n) img{height:20px;}
.iw_ribbon{position:fixed;height:126px;/*first 126 then 0 to close and 100% to open (while top goes to 0) */
width:0px;/*first 0 then animate to 100%*/
left:0px;/*or right 0*/
top:0px;/*First,top of thumb,then animate to 0*/
background:#000;opacity:0.8;z-index:10;overflow:hidden;display:none;}
.iw_close{position:absolute;top:10px;right:10px;background:#f0f0f0 url(../images/close.gif) no-repeat center center;width:18px;height:18px;display:none;cursor:pointer;}
.iw_zoom{color:white;font-size:8px;font-family:Arial,sans-serif;text-transform:uppercase;padding:14px;display:none;float:right;margin-right:30px;}
.iw_ribbon img{position:absolute;top:50%;left:50%;border:7px solid #fff;}
.iw_loading{background:#fff url(../images/loader.gif) no-repeat center center;width:28px;height:28px;position:absolute;top:50%;left:50%;z-index:10000;margin:-14px 0px 0px -14px;opacity:0.8;}
/* Footer Style */
.footer{position:fixed;bottom:0px;left:0px;width:100%;font-size:13px;background:#000;opacity:0.9;height:20px;padding-bottom:5px;text-transform:uppercase;font-family:'PT Sans Narrow',Arial,sans-serif;z-index:4;}
.footer a{padding:5px 10px;letter-spacing:1px;text-shadow:1px 1px 1px #000;color:#ddd;float:right;}
.footer a:hover{color:#fff;}
.footer a span{font-weight:bold;}
.footer a.left{float:left;}
分享到QQ
分享到微博
微信扫一扫
