Overview

The best way to think of the jQuery Masonry effect is that it's the opposite of css floats. Whereas floating elements with css will organise each block horizontally (see the grid layout), masonry organises each block vertically. The blocks on the page consequently organise themselves based on the next available space below the preceding block, like a jigsaw puzzle or as the name suggests a piece of masonry.

Two main layout options.

There are two main ways that zentools implements the masonry layout.

• Widths specified by the meta keywords - as shown below. (setup instructions below).
• Equal number of columns. Example here.

Features

• Create dynamic and flexible layouts using multiple width items as well as equal width items.
• Display any number of core elements from your Joomla or K2 content or images retrieved from a folder.
• Media queries revert all items to a 100% width for smaller screens.

Responding to small screens

If you resize this page you will be able to see that rather than rendering smaller and smaller columns on mobile resolutions we have used some media queries to specify that when the browser reaches the width of 520px, all of the columns collpase into a single column. This is a uniform behaviour for all of the Zentool module layouts.

The item category overlay

The platform template has some specific css added for the zentools module to display the category element as an overlay on top of the image. In order to display the category name in this way you need to ensure that the category element is the second item in the zentools list while the first is the image. If this is not the case then the category layout will display in a normal "flat" method.

Masonry using equal widths