Author: | Mathiew82 |
---|---|
Views Total: | 1,263 views |
Official Page: | Go to website |
Last Update: | July 19, 2019 |
License: | MIT |
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:
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);