Dompack Masonry
This Masonry is set will some specific features:
- lightweight
- layout totally based on columns, so changes in CSS width's won't screw up layout
- only have dompack as dependancy
Initialization is done though Javascript so you have total control on the order of initialization of page elements.
``
import DompackMasonry from "dompack-masonry";
// initialize in the DOMContentLoaded event or using dompack.register
dompack.register(".widget--widgetsgroup--masonry", (node, idx) =>
{
masonry = new DompackMasonry(grid
, { columns: columns
, gutter_x: 20
, gutter_y: 20
, items: ".widget"
//, equalizeheight: equalizeheight // We do equalizeheight using flexbox, because we don't need animating through abs.pos
});
}
`
Options can also be set through the DOM.
This can be usefull if you can have an arbitrary amount of masonries in a page which can have different settings.
You can then use a generic initialization and set some details that differ per masonry in the data-masonry attribute.
(NOTE: the setting specified in JS override the settings specified in the data-masonry attribute)
`
...
The best way is to pass your own array of nodes in the 'items' option, in the order you want to use the items.
The position in the DOM will stay the same but the left/top will be changed, allowing you to perform CSS transitions.
This is possible if you use different CSS selectors/classnames in the option "items" when initializing the masonry.
- Support for positioning through column div's instead of absolute positioning. You will lose the ability to animate (using transitions), but any change in the masonry item's size will cause the browser to correct the positions of the widgets.
- A 'clear / nextline' trigger?