Question

I want to make a mosaic gallery with pure CSS, but I can’t think of the “logic-side”, I need a practical example.

Can you guide me?

I have seen this example, but I don’t understand how to achieve it.

Here is an example of what I need: http://tmv.proto.jp/

I would like a non-jQuery solution.

Answer 1

First, make some divs to serve as columns. Then you use css to give them all a width (percent for fluid, px for fixed) and float them left.
Second, give all your images a width of 100% in css and distribute them among the columns.

Example (untested):

HTML:

<div class='col'>
    <img />
    <img />
    <img />
</div>

<div class='col'>
    <img />
    <img />
    <img />
</div>

CSS:

.col{
    width:50%;
    float:left;
}

img{
    width:100%;
}