Photos page grid layout

gistfile1.js

var contW = 704;
var hMargin = 8;
var maxW = contW - (4 * hMargin);
var hmaxW = maxW/2;
var qmaxW = maxW/4;

$('#main_stream div.photo').each(function(i,elm){
  var p = $(elm);
  var i = p.find('img');

  // first scale images to common height
  i.css({
    'height': 150,
    'vertical-align': 'middle'
  });
  p.css({
    'outline': '1px solid #AAA',
    'background': '#EEE',
    'overflow': 'hidden',
    'display': 'inline-block',
    'margin-bottom': 2
  });
  var w = i.width();
  var negW = null; // 'negative' width
  var marW = hMargin; // margin width

  // if image still exceeds max width, crop
  if(w > maxW) {
    negW = Math.floor((w - maxW) / 2);
    negW -= (3*hMargin)/2;
    marW = 0;
  }

  // images wider than half max width
  if(w < maxW) {
    negW = Math.floor((w-hmaxW) / 2);
    negW -= (hMargin/2);
  }

  // images wider than quarter max width
  if(w < hmaxW) {
    negW = Math.floor((w-qmaxW) / 2);
  }

  // other image sizes (smaller)
  if(w < qmaxW) {
    negW = Math.floor((qmaxW-w) / -2);
  }

  i.css({
    'margin-left': -negW,
    'margin-right': -negW
  });
  p.css('margin-right', marW);

});