Wt

Hi Sergey,

I would solve this by using CSS Columns. This is what I would do:

• Create a div container (WCContainer). We will call it "pictures". Add a style to it (setStyleClass or addStyleClass). A CSS class named "pictures" would be fine for it.
• For each picture you want to add create another container (WCContainer) and select "pictures" (our last container) as their parent. Add a style to it named "picture". Add your image and an optional text.

The aforementioned code should give you something like this:

<div class="pictures">
  <div class="picture"><img .../><p>Image text</p></div>
  <div class="picture"><img .../><p>Image text</p></div>
  <div class="picture"><img .../><p>Image text</p></div>
  <div class="picture"><img .../><p>Image text</p></div>
  <div class="picture"><img .../><p>Image text</p></div>
  <div class="picture"><img .../><p>Image text</p></div>
</div>

Now you have to create your CSS. To achieve this there is an easy to follow tutorial in this link: [[[http://cssdeck.com/labs/css-only-pinterest-style-columns-layout]]]

The CSS key instructions to achieve it are: column-count, column-gap and column-fill.

Best

there is more info here http://stackoverflow.com/questions/8000119/does-anyone-know-how-pinterest-coms-layout-works

it seems like the algorithm is pretty simple --- divide, calculate heights and place. may be c and wt would be a better choice.