一个国外网站的自适应效果

[cqvip]

效果演示: http://cmac.smugmug.com/gallery/5363890_2awbk/#542653421_Qgb2o

这个是一个相册的效果.左边缩略图显示的行数和列数和右边的大图片都会根据不同分辨率自动调整.

在800*600的分辨率下 左边缩略图显示的是3行3列.右边大图调用的是xxx-S.jpg的图片
在1024*768的分辨率下 左边缩略图显示的是3行4列.右边大图调用的是xxx-M.jpg的图片
在1280*800的分辨率下 左边缩略图显示的是4行5列.右边大图调用的还是xxx-M.jpg的图片
在更大的分辨率下时 左边缩略图显示的是4行5列.右边大图调用的是xxx-L.jpg的图片

请教一下各位达人两个问题
1. 这种在不同分辨率下左边显示的图片数量自适应调整,是如何控制的?
2. 右边的图片会根据不同的分辨率调用不同的图片这个又是怎么实现的?

请大家指点一下.谢谢

[孟子E章]

使用js判断分辨率的啊，里面有代码
<script type="text/javascript">
(function() {
var sRes;

if (typeof(screen) == 'object'){
sRes = screen.width + 'x' + screen.height;
}

if (readCookie('res') != sRes) {
createCookie('res', sRes, 365);
}
})();
</script>