Responsive boxes with different height

Responsive boxes with different height

I'm building a portfolio website.

The front page will have some box images and they will be responsive.

So far I've managed to set them properly with:
  1. .block img {
      float: left;
      margin: 1%;
      transition: all 1s ease 0s;
      width: 24%;
    }






when I resize the window, they are moving great, but when the box images has different height, the space between them is different. Here's a screenshot: http://i62.tinypic.com/2u5urnl.png

I want every box image to have a exact space even the height is different between them.

Here's a demo with boxes: http://jsfiddle.net/GeekyEggo/zPGVT/ I want box 5 and 7 to be moved close to the 1 and 3 boxes.

This website http://www.jimmy-olson.com/
has images with different height, they're responsive and the space is equal there, not like mine example.

I've noticed there when I inspect with firebug, the images "left" value is changing every time when I resize the window.

Here's another website that has a same structure: http://www.nicolasfleure.com/

Is there a jQuery plugin for that?