Directory

← Back

Masonry

Cascading grid layout based on Masonry JavaScript library

Author

Rating

Popularity

<100

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);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Valo theme support
  • API to change wrapper style names (issue #10)
  • Masonry library updated to 3.3.1
  • HTML5 Drag'n drop reordering removed as it did not work as well as well as planned. If you need this feature, use version 0.4.1 if it works for you. Or wait for Packery based add-on.
Released
2015-08-24
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.3+
Vaadin 7.1+ in 0.3.0
Browser
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Internet Explorer
Windows Phone

Masonry - Vaadin Add-on Directory

Cascading grid layout based on Masonry JavaScript library Masonry - Vaadin Add-on Directory
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
Online