Jquery + javascript 縮圖(列表圖片的排列與自動縮放)

HTML:
＜ul class="ImageList"＞
＜li＞＜img src="圖片連結" class="Image"/＞＜/li＞
＜li＞＜img src="圖片連結" class="Image"/＞＜/li＞
＜li＞＜img src="圖片連結" class="Image"/＞＜/li＞
＜/ul＞

CSS:
.ImageList{float:left;width:400px;}
/*一行四個*/
.ImageList li{
float:left;
width:90px;
text-align:center;
margin:3px;
border:solid 1px #ebebeb;
background:#f7f7f7;
padding:5px;}
/*圖片顯示區域的大小，固定一下，以便文字對其*/
.ImageList li .Image{
height:60px;
width:80px;
display:block;
border:0px;}

javascript:
$(document).ready(function(){
$(".ImageList").find("img").each(
function(){
ShowImage(this,80,60);
}
);
});
//圖片縮放
function ShowImage(ImgD,proMaxWidth,proMaxHeight){
var image=new Image();
image.src=ImgD.src;

if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height; if(rate <= 1){ ImgD.style.width = image.width*rate; ImgD.style.height =image.height*rate; } else { ImgD.style.width = image.width; ImgD.style.height =image.height; } } }