Question

Is this Link possible without javascript?
I’m trying to learn css and floating layouts.
I’ve searched on the forums and people’s links to this site, and even if this is looks like a good solution I would like to broaden my skills in css and html.

Answer 1

Using CSS3 Columns you can easily achieve the same result on modern browser:

Example jsbin: http://jsbin.com/ivumoq/1/edit

relevant CSS

body > div {
   -webkit-column-count:3; 
   -webkit-column-width:200px;
   -moz-column-count:3; 
   -moz-column-width:200px
   column-count:3; 
   column-width:200px;
}

You may also define the number of columns according to a specific mediaquery. E.g. if you wanto to display 4 columns when the viewport is larger that > 960px

@media all and (min-width:960px) {
    body > div {
        -webkit-column-count:4; 
        -moz-column-count:4; 
        column-count:4;
    } 
}

So you could emulate the reflow of masonry on browser resize.

Example with mediaqueries: http://jsbin.com/ivumoq/2/edit

Otherwise, using float you need to define three floated containers (as three independent columns) and place approx.ly 1/3 of the images on each container.