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

[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. 右边的图片会根据不同的分辨率调用不同的图片这个又是怎么实现的?

请大家指点一下.谢谢

[qizhicong2]

1.固定缩略图所在块元素的宽度，float设为left，缩略图所在区域的width不固定，就可以实现自动根据缩略图所在区域的最大宽度排列换行。
2.可根据计算screen.width - 缩略图宽度X一行缩略图的最少个数 选择最接近宽度的图片

[hookee]

1.固定缩略图所在块元素的宽度，float设为left，缩略图所在区域的width不固定，就可以实现自动根据缩略图所在区域的最大宽度排列换行。
2.可根据计算screen.width - 缩略图宽度X一行缩略图的最少个数 选择最接近宽度的图片