pure-masonry-grid

Masonry Grid without absolute positioning and css

Website and Examples

In development...

Docs

Getting Started

Adding to project via npm

npm i pure-masonry-grid

or just download the files and include in your HTML via script tag as follows

<script src="pure-masonry-grid/dist/pure-masonry-grid.min.js"></script>

Initializing

The following HTML markup should be maintained:

<div id="my-masonry-grid">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
  <div>Grid Item 3</div>
  ...
</div>

In js file:

const masonry = new PureMasonryGrid('#my-masonry-grid', //config goes here);

Now you can see the masonry grid with default config. Available config is described below.

Config

columns (default: 4): number

The count of columns.

columnGap (default: 16): number

Horizontal gap between grid items in px.

rowGap (default: columnGap): number

Vertical gap between grid items in px.

itemClass: string

Class added to all grid items individually.

breakpoints: { [key: number]: { ...config } }

Adds responsive breakpoints for custom layouts on different screen sizes. Gets an object with keys as min-width of the screen for media query and values as minimum config object:

{
  // 1 column and 10px gap if window width < 480px
  // as the minimum provided breakpoint is 480
  columns: 1,
  columnGap: 10,
  breakpoints: {
    // 4 columns and 10px gap if window width >= 1200px
    1200: {
      columns: 4,
      columnGap: 10,
    },
    // 3 columns and 20px gap if window width >= 992px
    992: {
      columns: 3,
      columnGap: 20,
    },
    // 2 columns and 15px gap if window width >= 480px
    480: {
      columns: 2,
      columnGap: 15,
    },
  },
}

Events

All event callbacks get instance of the class as first argument.

{
  events: {
    init: instance => {
      console.log('Init: ', instance);
    },
    relayout: instance => {
      console.log('Relayout: ', instance);
    },
    append: instance => {
      console.log('Append: ', instance);
    },
  },
}

init: (instance) => {}

Event is fired after grid is initialized and layout is ready.

relayout: (instance) => {}

Event is fired after the layout has been updated if breakpoints config object has been provided.

append: (instance) => {}

Event is fired after new grid items has been appended via appendItems method.

Methods

appendItems

In case if you need to append new items into grid. It accepts as argument array of HTMLElements. Example of infinite scroll with dummy data:

// dummy data
const srcs = [
  '/img1.jpg',
  '/img2.jpg',
  '/img3.jpg',
  ...
];
const masonry = new PureMasonryGrid('#my-masonry-grid');
const loadMore = document.querySelector('#load-more');
let loading = false;

window.addEventListener('scroll', () => {
  if (loading) {
    return;
  }

  if (window.scrollY + window.innerHeight > loadMore.offsetTop) {
    loading = true;

    // create array of HTMLImageElement with src from dummy data
    const images = srcs.map(src => {
      const img = document.createElement('img');
      img.src = src;

      return img;
    });

    // call appendItems method with array of HTMLImageElement as argument
    masonry.appendItems(images);
  }
});

NOTE: append callback function, if specified in config, is executed after items appended.