谷歌图像异构拇指定位

Question

Google 图片搜索返回不同尺寸的图片。甚至他们的拇指大小也不同。但它们仍然以保持干净边缘的方式排列。即使调整浏览器的大小，也可以保持左右对齐正确。我注意到的是他们将一个图像页面分组到一个 ul 中，每个图像都在一个 li 中。并非所有行都包含相同数量的图像。但是他们仍然如何设法使不同尺寸的图像正确对齐？

编辑

虽然我已经接受了一个答案，但它并不完全匹配。这可能是一场近乎匹配的比赛。但是我仍然想知道他们正在做什么的确切程序。我无法画出图案。 似乎他们将page 包装在<ol> 中并将图像放入<li> 但是当我调整大小时，图像会在页面之间重新分配。但是page <ol> 现在应该包含多少张图片还有待决定。可以使用什么程序来做到这一点？并且图像也会根据我认为的standard 高度调整大小。并且在调整大小时会更改标准高度。多少钱？这是怎么决定的？

Answer 1

这不完全一样，但是通过查看jQuery Masonry plug-in 采用的方法，您可能会获得一些关于如何优化图像“打包”的有用想法。

Answer 2

他们知道每个缩略图有多大，因为它存储在他们的图像数据库中。他们只是让每个<li> 向左浮动，并根据该部分图像中最大的图像使它们成为固定大小。

Answer 3

我为此编写了一个小插件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();
});

要包含的库：

• jQuery
• GreenSock's TweenMax