how to make image flow like this

The layout technique the site is using is quite tricky, I wonder if they're using JavaScript to write the classes for each div...

I would think you can achive a very similar thing by using a simple float left declaration.

.myclass img {
float: left;
margin: 0 10px 10px 0;
}

Where myclass is set on the parent containing div.

Things start getting a bit ugly when images are different widths (if you want to preserve a nice grid-like layout that is), in which case you need to set width on the div surrounding the actual image (just like the site you refer to does). You can also set a min-height, or a hard height value if you're really wanting a real grid.

Lets say you have output that looks like this (lets think there are many of these output in the gallery page):

<div class="field-image">
  <img src="myimage.jpg" />
</div>

Then your CSS starts looking something like this;

.field-image {
float: left;
width: 220px;
min-height: 220px;
margin: 0 10px 10px 0;
}

This will reflow as the width of the page changes, as it gets narrower the right-most images will be pushed down to the next row and so on.

In any case, it'll take a bit of mucking around to get what you want, although the idea is pretty simple.

Need help with IE?
Learn basic XHTML and CSS first.
Get smart with web specs.