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

要包含的

库：

谷歌图像异构拇指定位

3 个答案: