jQuery Forum

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?