masonry UI Component

jQuery.telligent.evolution.ui.components.masonry

UI component which arranges elements in a masonry layout using evolutionMasonry. UI Component which arranges elements in a masonry layout using evolutionMasonry. The default implementation uses the evolutionMasonry plugin. Overrides can be provided at the theme level to present masonry differently.

Endless scrolling can be achieved with a combination of the scrollend event and the 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' });

    }
};

Recommended