利用Jquery制作的图片分类，过滤。共有3中效果可以选择。兼容IE7以及以上，chrome，safari等等浏览器。先上一张效果图以及在线演示地址。

HTML

效果1效果2效果3查看源代码汽车美女摄影全部

CSS

#MainDiv{
	width:680px;
	margin:0 auto;
	margin-top:20px;
	height:800px;
}
#MainDiv>img{
	width:200px;
	height:150px;
	border:5px solid #fff;
	margin-left:20px;
	margin-top:20px;
	  -moz-box-shadow: 0 0 5px #ccc;  
    -webkit-box-shadow: 0 0 5px #ccc;  
    box-shadow: 0 0 5px #ccc;
	position:absolute;
}
#MainDiv>img:hover{
	opacity:0.8;
}
.btnP{
	margin:0px;
	text-align:center;
	margin-top:50px;
}
.btnA{
/*	float:left;
	padding:8px 20px 8px 20px;
	border:1px solid #ccc;
	 -webkit-border-radius: 3px;  
    -moz-border-radius:  3px;    
    border-radius:  3px;  */
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	margin-left:20px;
	cursor:pointer;
	text-decoration:none;
	color:#808080;
}
.btnSelect{
	padding:5px 20px 5px 20px;
	 -webkit-border-radius: 3px;  
    -moz-border-radius:  3px;    
    border-radius:  3px;
	background-color: #4a3113;
	outline: none;
	border: 1px solid #fff;
	color: #fff;
	opacity: 0.8;
	text-align: center;
	cursor: pointer;
	margin-left:10px;
}
.btnSelect:hover{
	opacity:1;
}

Jq

function ChangeFlag(a){
	$(".btnA").css("color","#808080");
	ImageSelectHandler.selectAll();
	switch(a){
		case 0:
		$(".btnOne").css("color","#FC6");
		ImageSelectHandler.ImageSelectFlag=0;
		break;
		case 1:
		$(".btnTwo").css("color","#FC6");
		ImageSelectHandler.ImageSelectFlag=1;
		break;
		case 2:
		$(".btnThree").css("color","#FC6");
		ImageSelectHandler.ImageSelectFlag=2;
		break;
	}
}
var ImageSelectHandler={
	ImageSelectFlag:0,
	Init:function(){
		for(var i=0;iimg").length;i  ){
			if(i<=2){
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:i*25 210*i "px",marginTop:"0px"},500);
			}else if(i<=5){
				var index=i-3;
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:205},500);
			}else if(i<=8){
				var index=i-6;
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:395},500);
			}else{
				var index=i-9;
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:585},500);
			}
		}
	},
	SelectCar:function(){
		switch(ImageSelectHandler.ImageSelectFlag){
			case 0:
			$(".ImageCar").stop().animate({opacity:1},500);
			$(".ImageGirl").stop().animate({opacity:0.1},500);
			$(".ImagePhoto").stop().animate({opacity:0.1},500);
			break;
			case 1:
			ImageSelectHandler.selectAll();
			setTimeout(function(){
			$(".ImageCar").css("z-index",10);
			$(".ImageCar").animate({width:"220px",height:"160px",opacity:1},500);
			for(var i=0;iimg").length;i  ){
			if(i<=2){
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:i*25 210*i "px",opacity:1,width:200 "px",height:"150px",marginTop:"0px"},50);
			}else if(i<=5){
				var index=i-3;
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:205,opacity:1,width:200 "px",height:"150px"},50);
			}else if(i<=8){
				var index=i-6;
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:395,opacity:1,width:200 "px",height:"150px"},50);
			}else{
				var index=i-9;
				$($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:585,opacity:1,width:200 "px",height:"150px"},50);
			}
			}
	}
}