谷歌图像异构拇指定位

Question

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

编辑

虽然我已经接受了答案但它不完全匹配。这可能是一场势均力敌的比赛。但我仍然想知道他们正在做的具体程序是什么。我无法勾画出这个模式。 似乎他们将 page 包装在

中，并将图像放入
1. 但是当我调整大小时，图像会重新分配页面之间。但是 page
   现在应该包含多少图像还有待决定。可以使用什么程序来实现这一点？我认为图像的大小也是根据标准高度来调整的。并且标准高度会在调整大小时发生变化。多少多少？这是怎么决定的？

Answer 1

这并不完全相同，但是通过查看 jQuery Masonry 插件。

Answer 2

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

向左浮动，并根据该部分图像中最大的图像使它们具有固定大小。

Answer 3

我写了一个小插件就是为了做到这一点这里你可以观看实际操作：

(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 的 TweenMax