Masonry-style Image/Card Layout In Vanilla JavaScript – masonry-layout-vanilla

Preview:

Description:

A vanilla JavaScript plugin to render a responsive, Masonry-style image and/or card layout using plain JavaScript and CSS. No dependencies.

See also:

• Best jQuery/JavaScript Masonry Layout Plugins
• Best Grid Layouts In jQuery/JavaScript/CSS

How to use it:

Download and import the necessary JavaScript & CSS files into the HTML file.

<link rel="stylesheet" href="css/masonry-layout-vanilla.min.css" />
<script src="src/masonry-layout-vanilla.min.js"></script>

Insert images or cards to the masonry layout.

<div class="wrapper-masonry">
  <div id="masonry-image">
    <img src="1.jpg" class="image" />
    <img src="2.jpg" class="image" />
    <img src="3.jpg" class="image" />
    ...
  </div>
</div>

<div class="wrapper-masonry">
  <div id="masonry-card">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    ...
  </div>
</div>

Initialize the library and specify the number of columns to display.

fecthMasonry('masonry-image', 'image', 3);
fecthMasonry('masonry-card', 'card', 4);