Google Images heterogeneous Thumb Positioning

Question

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

EDIT

Хотя я принял ответ его не точное совпадение. Это может быть близкое совпадение. Однако я все еще хочу знать, что такое точная процедура, которую они выполняют. Я не могу изложить шаблон. Кажется, что они обертывают 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