Masonry | Creates a responsive 'Masonry' layout of child elements
shadow
The Masonry component creates a responsive "Masonry" layout of child elements that are dynamically arranged into columns based on specified attributes. Supports customizing the number of columns, maximum column width, element spacing, and debouncing to optimize performance.
Use the max-col-width attribute to limit the width of the columns to the specified value.
Use the gap attribute to specify the width of the gap between columns in pixels.
| Description | Defines the number of columns. For auto, selects the number of columns according to the width of the parent. |
| Attribute | inches |
| Type | string ｜ undefined |
| Default | auto |
| Description | Specifies the time in ms for the layout to reformat for each change in masonry layout size. This reflow is delayed to prevent the layout algorithm from being invoked too often in succession. |
| Attribute | debounce |
| Type | string ｜ undefined |
| Default | 300 |
| Description | Defines the width of the space between columns in pixels. |
| Attribute | gap |
| Type | string ｜ undefined |
| Default | 24 |
| Description | Sets the maximum width of the columns in pixels. |
| Attribute | max-col-width |
| Type | string ｜ undefined |
| Default | 500 |
No events available for this component.
No public methods available for this component.
| Name | Description |
|---|
column | Refers to all columns inside the element. |
column-index | Refers to a specific column element within an element, where index represents the column order. The order starts with zero. |
native | Refers to a div element inside an element. |
| Name | Description |
|---|
--wj-masonry-layout-col-count | Defines the number of columns in the masonry layout. |
--wj-masonry-layout-gap | Specifies the gap between items in the masonry layout. |
| Name | Description |
|---|
{index} | The contents are placed in a column, index represents the column order. |