Google Images разнородное расположение большого пальца

Question

Поиск картинок Google возвращает изображения разных размеров.даже их большие пальцы имеют разный размер.Но все же они устроены таким образом, что сохраняют чистую границу.даже изменение размера браузера сохраняет правильное выравнивание по левому и правому краям.Я заметил, что они группируют страницу изображения в ul, и каждое изображение находится в li.не все строки содержат одинаковое количество изображений.Но все же, как им удается правильно выровнять изображения разных размеров?

РЕДАКТИРОВАТЬ

Хотя я принял ответ Это не точное соответствие.Это может быть близкий матч.Однако я все еще хочу знать, что именно они делают.Я не могу записать шаблон.Кажется, что они обертывают page в <ol> и помещают изображения в <li> Но при изменении размера изображения перераспределяются между страницами.Но сколько изображений должно содержать page <ol> сейчас, предстоит решить.Какую процедуру можно использовать для этого?а также размеры изображений меняются в зависимости от высоты standard.и эта стандартная высота изменяется при изменении размера.Сколько сколько?как это решено?

Answer 1

Это не совсем то же самое, но вы можете получить некоторые полезные идеи о том, как оптимизировать «упаковку» изображений, взглянув на подход, используемый плагином jQuery Masonry .

Answer 2

Я написал небольшой плагин только для этого ЗДЕСЬ вы можете посмотреть его в действии:

(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

Answer 3

Они знают, насколько велика каждая миниатюра, поскольку она хранится в их базе данных изображений.Они просто заставляют каждое <li> плавать влево и устанавливают фиксированный размер в зависимости от того, какое наибольшее изображение находится в этом разделе изображений.