Google图片搜索返回不同大小的图片。即使他们的拇指大小也不同。但它们的排列方式仍然保持清晰。即使调整浏览器大小，左右对齐也是正确的。我注意到的是，他们将图像的页面分组为一个ul，并且每个图像都在一个li中。并非所有行都包含相同数量的图像。但他们仍然如何设法保持不同大小的图像正确对齐？Google图片异构Thumb定位
编辑
虽然我接受了一个答案它不完全匹配。它可能是一个近乎匹配的。不过，我仍然想知道他们在做什么确切的程序。我无法揣测出这种模式。 看来，他们包装page在<ol>并把图像<li>但是，当我调整大小的图像重新分配在页面之间。但是现在应该包含多少个图像page <ol>。可以用什么程序来完成这个过程？并且还根据我认为的高度standard调整图像大小。并且标准高度在调整大小时发生变化。多少钱？这是如何决定的？
这不完全相同，但您可以通过查看jQuery Masonry plug-in采取的方法来获得关于如何优化图像“打包”的一些有用的想法。
他们知道每个缩略图有多大，因为它存储在他们的图像数据库中。他们只是让每个<li>左浮动，并根据该部分图像中最大图像的大小使其成为固定大小。
我写了一个小插件，只是为了做到这一点HERE你可以在行动观看：
(function($){
//to arrange elements like google image
//start of the plugin
var tm=TweenMax;
var positionFunc= function(options, elem){
var setting=$.extend({
height:150,
container:$('body'),
margin:5,
borderWidth:1,
borderColor:'#000',
borderStyle:'solid',
boxShadow:'0 0 0 #000',
borderRadius:0,
type:'img'
},options);
tm.set($(elem),{
'max-height':setting.height
});
$(elem).wrap('<div class="easyPositionWrap"></div>');
var winsize=setting.container.width();
var thisrow=0;
var elementsused=0;
var row=0;
tm.set($('.easyPositionWrap'),{
border:setting.borderWidth+'px '+setting.borderStyle+' '+setting.borderColor,
borderRadius:setting.borderRadius,
boxShadow:setting.boxShadow,
margin:setting.margin,
height:setting.height,
position:'relative',
display:'block',
overflow:'hidden',
float:'left'
});
$('.easyPositionWrap').each(function(index, element) {
if(thisrow<winsize){
thisrow+=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
else{
var currentwidth=thisrow-$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').width()-(setting.margin*2)+(setting.borderWidth*2);
var nextimagewidth=$(this).prev('.easyPositionWrap').width()+(setting.margin*2)+(setting.borderWidth*2);
var elems=$(this).prevAll('.easyPositionWrap').length-elementsused;
var widthtobetaken=(nextimagewidth-(winsize-currentwidth))/(elems);
if(widthtobetaken!=0){
if(elementsused==0){
$(this).prevUntil('.easyPositionWrap:eq(0)').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
$('.easyPositionWrap:eq(0)').width($('.easyPositionWrap:eq(0)').width()-widthtobetaken);
$('.easyPositionWrap:eq(0) '+setting.type).css('margin-left','-'+(widthtobetaken/2)+'px');
}
else{
$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
}
}
elementsused+=elems;
thisrow=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
});
$(window).resize(function(){
clearTimeout(window.thePositionTO);
window.thePositionTO=setTimeout(function(){
$(elem).each(function(index, element) {
$(this).unwrap('.easyPositionWrap');
$(this).data('easyPositioned',false);
});
$(elem).easyPosition(options);
},200);
});
}
$.fn.easyPosition= function(options){
if($(this).data('easyPositioned')) return;
positionFunc(options, this);
$(this).data('easyPositioned',true);
};
//end of the plugin
}(jQuery));
$(window).load(function(){
$('img').easyPosition();
});
库包括：
所有大拇指的大小都是固定的。拇指不是基于浏览器大小或屏幕分辨率生成的。那么这很简单吗？我仍然怀疑在边距和填充上必须进行一些棘手的测量，以在较小的图像之间进行距离测量。 – 2011-01-26 18:57:28
如果Google的某个人解决了背包问题，或者至少想出了一个方便的方法来降低它的复杂性，那么我不会感到惊讶。你会注意到，如果你最终得到不同的宽度/缩略图，图像的某些部分会被截掉，所以在一行中找出最少数量的图像并调整li的大小以获得正确性并不难间距。 – 2011-01-26 19:02:02