how to get a grid of different sizes using css and javascript

Problem

I have a dynamically created grid with images of different sizes how do i get a tiled gallary

<div class="container">
   <div class="block1">
      <img src="img1" />
   </div>
   <div class="block2">
      <img src="img1" />
   </div>
   <div class="block3">
      <img src="img1" />
   </div>
   <div class="block4">
      <img src="img1" />
   </div>
</div>

I do not want to use third party libraries any help would be appreciated..

Problem courtesy of: sandyrjs

Solution

You can resize your images by JavaScript. For example, this code will resize each img at the maximumHeight value.

JSFiddle: http://jsfiddle.net/FU76g/

HTML:

<div class="container" id="container">
   <div class="block1">
      <img src="http://placehold.it/350x150" />
   </div>
   <div class="block2">
      <img src="http://placehold.it/100x100" />
   </div>
   <div class="block3">
      <img src="http://placehold.it/250x200" />
   </div>
   <div class="block4">
      <img src="http://placehold.it/350x150" />
   </div>
</div>

JavaScript:

var container_div = document.getElementById("container"); 
var array_img=container_div.getElementsByTagName("img");

var maxHeight=0;

for(var index = 0; index < array_img.length; index++){
    if (array_img[index].clientHeight > maxHeight){
        maxHeight = array_img[index].clientHeight;
    }
}

alert("will do");
for(index = 0; index < array_img.length; index++){
    array_img[index].height = maxHeight;
}
alert("done");
Solution courtesy of: Nicolas Henrard

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.