Directory

Masonry

Cascading grid layout based on Masonry JavaScript library

View larger

Close

Server side component container API for constructing Cascading grid layouts with help of Masonry JavaScript library (by David DeSandro, http://masonry.desandro.com/).

JavaScript is in MIT license, Add-on code is with Apache2 license (these are compatible).

For Drag'n Drop functionality, please check the GridStack addon: https://vaadin.com/directory#!addon/gridstack-add-on

Sample code

// You usually want to wrap this inside panel
Panel panel = new Panel();
panel.setSizeFull();

// Create layout component
MasonryLayout layout = new MasonryLayout();

// Use full width, but leave height undefined (let panel take care of scrolling)
layout.setWidth("100%");

// And add it to panel
panel.setContent(layout);

// Then just add the components...
layout.addComponent(myComponent);
layout.addComponent(myBiggerComponent, MasonryLayout.DOUBLE_WIDE_STYLENAME);

// This enables optional automatic re-layouting on client side
// when images in layout are loaded by browser
layout.setAutomaticLayoutWhenImagesLoaded(true);

Links

• Online Demo
• Issue Tracker
• Source Code
• Author Homepage

Compatibility