Masonry Layout With JavaScript and CSS Flexbox – flexmasonry

Preview:

Description:

flexmasonry is a lightweight JavaScript layout library which dynamically renders a Masonry-like grid layout using CSS3 flexbox.

With the responsive options, you can specify the number of columns to display on different screen sizes.

See also:

• 10 Best jQuery/JavaScript masonry Layout Plugins

How to use it:

Install & download the flexmasonry package.

# Yarn
$ yarn add flexmasonry
# NPM
$ npm install flexmasonry --save

Or download the zip and insert the following JavaScript and CSS files into to the html file.

<link rel="stylesheet" href="./dist/flexmasonry.css">
<script src="./dist/flexmasonry.js"></script>

Or from the CDN.

<link rel="stylesheet" href="https://unpkg.com/flexmasonry/dist/flexmasonry.css">
<script src="https://unpkg.com/flexmasonry/dist/flexmasonry.js"></script>

Add grid items to the Masonry layout.

<div class="grid">
  <div><div class="inner"><img src="https://source.unsplash.com/t3DHojIo-08" alt=""></div></div>
  <div><div class="inner"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div></div>
  <div><div class="inner"><img src="https://source.unsplash.com/SOZWHqeXcPQ" alt=""></div></div>
  <div><div class="inner"><img src="https://source.unsplash.com/bkdzvgBB7rQ" alt=""></div></div>
  <div><div class="inner"><img src="https://source.unsplash.com/Aruugw_rJCM" alt=""></div></div>
  ...
</div>

Initialize the library on the top container. Done.

FlexMasonry.init('.grid');

Specify the number of columns to generate.

FlexMasonry.init('.grid',{
  responsive: false,
  numCols: 6
});

Or specify the number of columns for each breakpoint.

FlexMasonry.init('.grid',{
  responsive: true,
  breakpointCols: {
    'min-width: 1500px': 6,
    'min-width: 1200px': 5,
    'min-width: 992px': 4,
    'min-width: 768px': 3,
    'min-width: 576px': 2
  },
});

Refresh the masonry layout. Great for uploading the layout when new items are added.

FlexMasonry.refresh('.grid',{
  // options
});

Refresh all the layouts when there’re multiple instance on the same page.

FlexMasonry.refreshAll({
  // options
});

Destroy the instance.

FlexMasonry.destroyAll();