Panels Masonry

This module adds Masonry for Panels style.

Why Masonry?

When you have multiple arbitrary size block contents in the Panel region, Masonry optimizes layout of these contents within a display area of a specific width. The program acts like a good tetris player arranging blocks. By proper implementation, you can effectively maximize the number of arbitrary size contents that can be shown within the specific display area.

It is useful in any one or more of these circumstances:

• Each content is of different block size.
• Each content block size change dynamically.
• Display area is small, or with arbitrary resolution. (e.g. display in mobile devices), and you want to maximize the space used for display, dynamically.
• You do not want (or lazy) to fix the layout in the panel.

Further Information

For more information and examples about Masonry, or Jquery Masonry, please visit: http://masonry.desandro.com/
This module uses Vanilla Masonry (http://vanilla-masonry.desandro.com/ ) rather than Jquery Masonry for better operation.

Usage

To use it properly, after installing the module and change the Panel style of a Panel region to “Masonry”, you will also need to specify the width of each content in the Panel region. To do this, simply add a css id/class name in the “CSS properties” of the content, and specify the width of the css id/class somewhere (you can use “css injector” module).
For example, if the class name under CSS properties of two contents are “acontent” and “bcontent”, add a CSS rule in css injector:
.acontent { width: 200px; }
.bcontent { width: 300px; }
You can use different width for different content.