simple-masonry.js examples

simple-masonry-columnlength.js

simpleM.columnsLength()
// returns number of available colums

simple-masonry-each.js

// iterate trough all items
simpleM.each(function (item, index) {
    // do stuff
});

// or to all items of a single column
simpleM.each(function (item, index) {
    // do stuff
}, columnIndex);

// tip: use native Array-iterator
simpleM.get().forEach(function (item, index) {
    // do stuff
});

simple-masonry-get.js

// get all items in an array
simpleM.get();

// get all items in an array of the column with this index
simpleM.get(index);

simple-masonry-init.js

var simpleM = new SimpleMasonry();

simpleM.init();

//In case you want to use your own css classes:

var simpleM = new SimpleMasonry({
    masonryBox: '.my-box-class',
    masonryColumn: '.my-column-class'
});

simpleM.init();

simple-masonry-on.js

simpleM.on('append', function (item) {
    // do something with appended item
});

simpleM.on('prepend', function (item) {
    // do something with prepended item
});

simpleM.on('order', function (items) {
    // do something with all items
});

simple-masonry-prepend-append.js

var simpleM = new SimpleMasonry();

simpleM.init();

simpleM.prepend(document.getElementById('item-prepend'));

simpleM.append(document.getElementById('item-append'));

simple-masonry.html

<!-- wrap columns -->
<section class="masonry-box container">
    <!-- columns 1 -->
    <div class="masonry-column col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="item">
            <h3>item 1</h3>
        </div>
        <!-- item 2 is allready in the second masonry-column -->
        <!-- item 3 is allready in the third masonry-column -->
        <div class="item">
            <h3>item 4</h3>
        </div>
        <div class="item">
            <h3>item 5</h3>
        </div>
        <div class="item">
            <h3>item 6</h3>
        </div>
        <div class="item">
            <h3>item 7</h3>
        </div>
        <div class="item">
            <h3>item 8</h3>
        </div>
    </div>
    <!-- columns 2 -->
    <div class="masonry-column col-lg-3 col-md-4 col-sm-6">
        <div class="item">
            <h3>item 2</h3>             
        </div>
    </div>
    <!-- columns 3 -->
    <div class="masonry-column col-lg-3 col-md-4">
        <div class="item">
            <h3>item 3</h3>
        </div>
    </div>
    <!-- columns 4 -->
    <div class="masonry-column col-lg-3"></div>
</section>