Google Images Algorithm

by btevfik

HTML

<div id="search">
    
<img src="https://lh4.googleusercontent.com/-FQNMV5kNh48/T5r2k7e2KvI/AAAAAAAALWc/9AfwLKOa_SE/w394-h214-n-k/NewsThatBarcelonaArentInTheFinalsReachesMadrid.gif" data-width="394" data-height="214" /><img src="https://lh3.googleusercontent.com/-0IYWwoU404o/T5hFqf8Fd7I/AAAAAAAALV4/ZWtvualW-gs/w302-h214-n-k/SirFrancisBacon.jpg" data-width="302" data-height="214" /><img src="https://lh5.googleusercontent.com/-MpTZPLZI3-E/T5eMgJVx2JI/AAAAAAAALVE/VMzdGSUkYmE/w379-h214-n-k/winners_losers.jpg" data-width="379" data-height="214" /><img src="https://lh5.googleusercontent.com/-DjiYXWoFDkU/T5eEoZ9w6nI/AAAAAAAALUk/7kDnKp66zgM/w453-h272-n-k/vintcerf.jpg" data-width="453" data-height="272" /><img src="https://lh3.googleusercontent.com/-GOiSlIr0JQc/T5Yrpil6MII/AAAAAAAALTY/IeVknUkvKoQ/w210-h272-n-k/SmileBestMakeUp.jpg" data-width="210" data-height="272" /><img src="https://lh4.googleusercontent.com/-5B9kjDPgIGo/T5BydZ6yROI/AAAAAAAALRo/pyXBrGkGwl4/w412-h272-n-k/babyimagedrawing.jpg" data-width="412" data-height="272" /><img src="https://lh5.googleusercontent.com/-JfMhSzmXbCI/T5BI9pyK67I/AAAAAAAALQ0/nbTo6U7V8xU/w262-h261-n-k/CloudHeart_crop.png" data-width="262" data-height="261" /><img src="https://lh6.googleusercontent.com/-jLD2DhgVGJM/T5A8cIfVtaI/AAAAAAAALQE/P1_nVvA5C5g/w350-h261-n-k/BatmanBike.png" data-width="350" data-height="261" /><img src="https://lh6.googleusercontent.com/-Ryh7FRiC2OA/T4sECH3OVSI/AAAAAAAALN0/WAuVjPybP5Y/w463-h261-n-k/AshleyYoung.gif" data-width="463" data-height="261" /><img src="https://lh6.googleusercontent.com/-cTCu7LRr1pI/T4iYovlrbXI/AAAAAAAALL0/-ndB-ytwp9o/w329-h183-n-k/GolfBubbaWatsonAerialView.jpg" data-width="329" data-height="183" /><img src="https://lh5.googleusercontent.com/-JzzEr9Eile8/T4iWULtQixI/AAAAAAAALLM/BWpJrLLzrT8/w189-h183-n-k/OpticalIllusion_SteppingFeet.gif" data-width="189" data-height="183" /><img...

CSS

#search{
    border:1px red solid;
    width:100%;    
}

JavaScript

$(document).ready(function () {
    
HEIGHTS = [];
    
function getheight(images, width) {
  width -= images.length * 5;
  var h = 0;
  for (var i = 0; i < images.length; ++i) {
    h += $(images[i]).data('width') / $(images[i]).data('height');
  }
  return width / h;
}

function setheight(images, height) {
  HEIGHTS.push(height);
  for (var i = 0; i < images.length; ++i) {
    $(images[i]).css({
      width: height * $(images[i]).data('width') / $(images[i]).data('height'),
      height: height
    });
    $(images[i]).attr('src', $(images[i]).attr('src').replace(/w[0-9]+-h[0-9]+/, 'w' + $(images[i]).width() + '-h' + $(images[i]).height()));
  }
}

function resize(images, width) {
  setheight(images, getheight(images, width));
}

function run(max_height) {
  var size = window.innerWidth - 50;

  var n = 0;
  var images = $('img');
  w: while (images.length > 0) {
    for (var i = 1; i < images.length + 1; ++i) {
      var slice = images.slice(0, i);
      var h = getheight(slice, size);
      if (h < max_height) {
        setheight(slice, h);
        n++;
        images = images.slice(i);
        continue w;
      }
    }
    setheight(slice, Math.min(max_height, h));
    n++;
    break;
  }
}

window.addEventListener('resize', function () { run(205); });
$(function () { run(205); });
});