整体效果：
HTML部分：
<body> <div class="content"> <header> <h1>A silent world</h1> <span>Image Wall with jQuery and CSS3</span> </header> <div class="iw_wrapper"> <ul class="iw_thumbs" id="iw_thumbs"> <li><img src="images/thumbs/1.jpg" data-img="images/full/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/thumbs/2.jpg" data-img="images/full/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/thumbs/3.jpg" data-img="images/full/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/thumbs/8.jpg" data-img="images/full/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/thumbs/9.jpg" data-img="images/full/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/thumbs/10.jpg" data-img="images/full/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/thumbs/6.jpg" data-img="images/full/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/thumbs/7.jpg" data-img="images/full/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/thumbs/8.jpg" data-img="images/full/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/thumbs/12.jpg" data-img="images/full/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/thumbs/4.jpg" data-img="images/full/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/thumbs/5.jpg" data-img="images/full/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/thumbs/6.jpg" data-img="images/full/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/thumbs/7.jpg" data-img="images/full/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/thumbs/10.jpg" data-img="images/full/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/thumbs/11.jpg" data-img="images/full/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/thumbs/3.jpg" data-img="images/full/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/thumbs/13.jpg" data-img="images/full/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/thumbs/14.jpg" data-img="images/full/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/thumbs/2.jpg" data-img="images/full/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/thumbs/4.jpg" data-img="images/full/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/thumbs/11.jpg" data-img="images/full/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/thumbs/12.jpg" data-img="images/full/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/thumbs/13.jpg" data-img="images/full/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/thumbs/14.jpg" data-img="images/full/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/thumbs/2.jpg" data-img="images/full/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/thumbs/4.jpg" data-img="images/full/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/thumbs/6.jpg" data-img="images/full/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/thumbs/8.jpg" data-img="images/full/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/thumbs/12.jpg" data-img="images/full/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/thumbs/2.jpg" data-img="images/full/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/thumbs/3.jpg" data-img="images/full/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/thumbs/4.jpg" data-img="images/full/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/thumbs/5.jpg" data-img="images/full/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/thumbs/6.jpg" data-img="images/full/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/thumbs/7.jpg" data-img="images/full/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/thumbs/8.jpg" data-img="images/full/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/thumbs/9.jpg" data-img="images/full/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/thumbs/10.jpg" data-img="images/full/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/thumbs/11.jpg" data-img="images/full/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/thumbs/1.jpg" data-img="images/full/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/thumbs/13.jpg" data-img="images/full/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/thumbs/14.jpg" data-img="images/full/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/thumbs/2.jpg" data-img="images/full/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/thumbs/4.jpg" data-img="images/full/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/thumbs/6.jpg" data-img="images/full/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> <div class="footer"> <a class="left" href="http://tympanus.net/Development/SlidingLetters/"><span>« Previous Demo:</span>Sliding Letters with jQuery</a> <a href="http://tympanus.net/codrops/2011/05/25/image-wall/"><strong>back to the Codrops tutorial</strong></a> <a href="http://www.flickr.com/photos/markjsebastian/" target="_blank">Photos by Mark Sebastian</a> </div>
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; }
JS部分：
$(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(); });
