Skip to content

Strobotti/img-mason

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ImgMason

A light-weight masonry layout library

Install

npm: npm install img-mason --save

Initialize

With vanilla Javascript:

window.ImgMason('#masonry-element-with-imgs', { /* options */ });

HTML markup:

<div id="masonry">
    <a href="https://www.strobotti.com/image/gallery/2015/06/30/DSC00153_01.jpg" target="_blank"><img src="https://www.strobotti.com/gallery/2015/06/30/DSC00153_01_medium.jpg" width="2048" height="1369" /></a>
    <a href="https://www.strobotti.com/image/gallery/2016/01/31/Crow-on-palmtree-2048x1280.jpg" target="_blank"><img src="https://www.strobotti.com/gallery/2016/01/31/Crow-on-palmtree-2048x1280_medium.jpg" width="2048" height="1280" /></a>
    <a href="https://www.strobotti.com/image/gallery/2016/01/12/DSC02812.jpg" target="_blank"><img src="https://www.strobotti.com/gallery/2016/01/12/DSC02812_medium.jpg" width="1370" height="2048" /></a>
    <a href="https://www.strobotti.com/image/gallery/2015/12/15/SAM_3323.jpg" target="_blank"><img src="https://www.strobotti.com/gallery/2015/12/15/SAM_3323_medium.jpg" width="1249" height="2048" /></a>
    <a href="https://www.strobotti.com/image/gallery/2015/10/06/SAM_2990.jpg" target="_blank"><img src="https://www.strobotti.com/gallery/2015/10/06/SAM_2990_medium.jpg" width="1713" height="2048" /></a>
</div>

Made by Juha Jantunen