masonry UI Component

Ben Tiedt — Tue, 19 Nov 2019 20:29:49 GMT

Current Revision posted to API Documentation by Ben Tiedt on 11/19/2019 20:29:49

jQuery.telligent.evolution.ui.components.masonry

UI component which arranges elements in a masonry layout using [[evolutionMasonry jQuery Plugin|evolutionMasonry]]. [[ui JavaScript API Module|UI Component]] which arranges elements in a masonry layout using [[evolutionMasonry jQuery Plugin|evolutionMasonry]]. The default implementation uses the [[evolutionMasonry jQuery Plugin|evolutionMasonry plugin]]. [[ui JavaScript API Module|Overrides can be provided]] at the theme level to present masonry differently.

Endless scrolling can be achieved with a combination of the [[scrollend jQuery Event|scrollend]] event and the [[evolutionMasonry jQuery Plugin|evolutionMasonry plugin]]'s, append method.

Options

Data made available to instances of the component:

columnClass: (string) CSS class name to apply to each rendered column. Should define, at minimum, a desired width. Through media queries, alternate widths can be defined for different targets.
- default: masonry-column

Example

Static Example using ui-masonry

<div class="ui-masonry container" data-columnclass="masonry-column">
    <div class="item" style="height: 40px; background-color: red;">1</div>
    <div class="item" style="height: 60px; background-color: blue;">2</div>
    <div class="item" style="height: 80px; background-color: green;">3</div>
    <div class="item" style="height: 50px; background-color: orange;">4</div>
    <div class="item" style="height: 20px; background-color: purple;">5</div>
    <div class="item" style="height: 100px; background-color: blue;">6</div>
    <div class="item" style="height: 70px; background-color: teal;">7</div>
    <div class="item" style="height: 90px; background-color: black;">8</div>
    <div class="item" style="height: 40px; background-color: red;">9</div>
</div>

Default Implementation

For reference purposes or as the basis for an override:

$.telligent.evolution.ui.components.masonry = {
    setup: function() {},
    add: function(elm, options) {
        $(elm).evolutionMasonry({
            'columnClass': (options.columnclass || $.fn.evolutionMasonry.defaults.columnClass)
        }).css({ 'visibility': 'visible' });

    }
};