1.0.6 • Published 10 years ago

simple-masonry v1.0.6

Weekly downloads
8
License
MIT
Repository
github
Last release
10 years ago

Simple Masonry

simple-masonry.js

Build Status

Show items with different heights in a grid of responsive columns. No position: absolute and so fully flexible in height and width of any item.

Check demo.

simple-masonry.js is written as es6. If you are not using a es6-compiler in your project then use simple-masonry-compiled.js!

simple-masonry works great with bootstrap (but you can use your own grid as well!). Wrap some columns in a container and fill them with items. It dosn't matter if you put them all in one column or preorder them. simple-masonry will order all items from each column in a zipper method as you can see in the following snippet.

<!-- 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>

Create columns and set the column width with bootstrap classes (or other grid system) like usual. !important: set 'col-[]-12' classes! Also if it seems to be senseless in normal use.

In default you can use the css-class masonry-box for the wrapping element and masonry-column for columns. Items don't need a extra class. Every element will be ordered if it's not just a pure text-node.

Get simple-masonry and include it in your project.

npm

$ npm install simple-masonry -S

bower

$ bower install simple-masonry

You can use your own classes for wrapping element and columns if you put them as parameter.

Usage

var simpleM = new SimpleMasonry();

Or with your own selector.

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

Then run it

// init all and order items
simpleM.init();

.append()

// add a node or an array of nodes at the end of all items
simpleM.append(node);
simpleM.append([node1, node2]);

.prepend()

// add a node or a array of nodes at the beginning of all items
simpleM.prepend(node);
simpleM.prepend([node1, node2]);

.get()

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

.each()

// 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
});

.columnsLength()

simpleM.columnsLength();
// returns number of available columns

.on()

// register a eventListener
simpleM.on('append', function (item) {
    // do stuff
});
simpleM.on('prepend', function (item) {
    // do stuff
});
simpleM.on('order', function (items) {
    // do stuff
});

Demo and more information here.


Authors

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago