用JQUERY构建一个照片墙

Posted on 2011/07/17 by aikur
今天我将告诉你怎样用jQuery去构建一个漂亮的照片墙，本教程来自 MARY LOU感谢她制作的教程，本文仅仅是本地汉化。
文章中用到了CSS3和一个jQuery插件： jQuery Masonry plugin by David DeSandro
废话不多说了，让我们开始吧！

构建页面框架：
在一切开始之前我们需要使用HTML结构标记好各个部分，这一切都非常的简单，我们使用了一个无需的图像序列和一个带状的元素在点击之后显示图片详情：

<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>Description Heading</h2>
<p>Some description text...</p>
</div>
</li>
<li>...</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>
其中”date-img”将告诉我们原图的路径位置，让我们看看样式表是怎么写的。

CSS部分：

首先我们需要定义iw_wrapper部分，让它在窗口居中显示，并且可以自己适应显示器的分辨率，所以我们在这里给出70%宽度即：

.iw_wrapper {
width:70%;
margin:30px auto 100px auto;
position:relative;
}
下一步就是定义列表元素，这里我们让他浮动而且边距是5像素：

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 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(1){
margin-left:50px;
}
/*每个顶部边距为30像素 */
ul.iw_thumbs li:nth-child(even){
margin-top:30px;
}
/* 每三个左边距为20px */
ul.iw_thumbs li:nth-child(3n){
margin-left:20px;
}
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;
width:0px;
left:0px;
top:0px;
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;
}
这就是全部样式表了，让我们给它增加一些功能。



JAVASCRIPT部分：

首先定义一些元素并且定义一些功能：

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() {
...
})();

ImageWall.init();
In our function we will start by defining some variables:

// 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功能，这里用到了我们在文章开头部分提及的那个插件：

init = function() {
$iw_thumbs.imagesLoaded(function(){
$iw_thumbs.masonry({
isAnimated : true
});
});
getWindowsDim();
initEventsHandler();
},
“getWindowsDim”将获得窗口的尺寸：

getWindowsDim = function() {
w_dim = {
width : $(window).width(),
height : $(window).height()
};
},
然后我们将定义某些功能初始化，比如点击缩略图

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”将会工作：

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();
  });

},
当点击关闭按钮的时候横带将会从左侧关闭，并且为下次点击调整高度。

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;
}
},
我们还需要一些功能来照顾某些正在发生的事件，当我们关闭色带将重置图像的z-index而且淡出描述文字：

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 span on top of the image
$loading = $('<span class="iw_loading"> </span>');

$el.append($loading);

// preload large image
$('<img alt="">').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};
这就是全部的内容了！我希望这个教程能对你有所启发！

文章来自Aikur的简单博客，原文地址： http://www.aikur.org/post/use-jquert-to-bulid-photo-wall.html ?