Html 谷歌图像异类拇指定位

谷歌图像搜索返回不同大小的图像。甚至他们的拇指大小也不一样。但它们的排列方式仍然保持了干净的边距。即使调整浏览器的大小，也能保持左右对齐。我注意到他们将一页图片组合成一个ul，每个图片都在一个li中。并非所有行都包含相同数量的图像。但他们如何使不同大小的图像正确对齐呢

编辑

虽然我接受了一个答案，但并不完全相符。这可能是一场势均力敌的比赛。然而，我仍然想知道他们在做什么。我画不出图案。

---

似乎他们将

页面

包装在

中，并将图像放入

中，但当我调整大小时，图像会在页面之间重新分布。但是

页面

现在应该包含多少图像有待决定。可以使用什么程序来实现这一点？而且，我认为图像的大小是基于

标准

高度调整的。标准高度会在调整大小时更改。多少钱？这是如何决定的？

他们知道每个缩略图有多大，因为它存储在他们的图像数据库中。它们只是使每个

向左浮动，并根据该部分图像中最大图像的大小将其设置为固定大小。

这并不完全相同，但您可能会得到一些关于如何优化图像“打包”的有用想法通过查看。

所采用的方法，我编写了一个小插件，您可以看到它的实际运行：

(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();
});

（函数（$）{
//排列像谷歌图片这样的元素
//插件的开始
var tm=吐温最大值；
var positionFunc=函数（选项，元素）{
var设置=$.extend({
身高：150，
容器：$（'body'），
差额：5，
边框宽度：1，
边框颜色：“#000”，
边框样式：'实心'，
boxShadow:'0#000'，
边界半径：0，
类型：'img'
}，选项）；
tm.set（$（元素）{
“最大高度”：设置.height
});
$（元素）。换行（“”）；
var winsize=setting.container.width（）；
var thisrow=0；
var elementsused=0；
var行=0；
tm.set（$（'.easyPositionWrap'）{
边框：设置.borderWidth+'px'+设置.borderStyle+''+设置.borderColor，
borderRadius:设置。borderRadius，
boxShadow:setting.boxShadow，
margin:setting.margin，
高度：设置。高度，
位置：'相对'，
显示：'block'，
溢出：'隐藏'，
浮动：'左'
});
$（'.easyPositionWrap'）。每个（函数（索引，元素）{
如果（这行所有的拇指都是固定大小的。而且拇指不是根据浏览器大小或屏幕分辨率生成的。那么简单吗？我仍然怀疑在边距和填充上一定有一些复杂的测量来确定较小图像之间的距离。如果谷歌的人解决了背包问题，或者至少来了，我不会感到惊讶找到一种简便的方法来降低它的复杂性。你会注意到，如果你最终得到不同的宽度/缩略图，图像的一部分会被剪掉，因此计算出一行中图像的最小数量并调整li的大小以获得适当的间距并不难。是的，这件事确实不难。而且非常简单简单易懂。但如果有人问我，我可以让他们理解非数学的东西，但它到底有多精确是一个容易混淆的难题。+1很好的选择。但是我仍然想知道（如何）谷歌方式。如果你使用Firebug，你可以看到他们正在做一些有趣的事情：使用
来（显然）动态裁剪缩略图以获得所需的间距，将base64图像数据直接编码到JS中，等等。由于它们在JavaScript中进行裁剪和调整大小，因此不难想象它们如何将每行的元素强制到所需的宽度和间距。