tiny-components
/
masonry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
masonry/README.md

1.1 KiB
Raw Permalink Blame History

Tiny Components - Masonry

Proof of Concept!

Using Styles for UI from Plain-UI

And a few Ideas from this Article

Source: https://gitea.node001.net/tiny-components/masonry
Mirror: https://github.com/node001-net/tiny-components-masonry

demo

Installation

Setup this registry in your project .npmrc file:

@tiny-components:registry=https://gitea.node001.net/api/packages/tiny-components/npm/

Install with npm or yarn

npm i --save @tiny-components/masonry
yarn add @tiny-components/masonry

Using

import Masonry from './masonry.js'

document.addEventListener("DOMContentLoaded", (event) => { 
    const masonry = new Masonry()
})

Markup,

<div class="tiny-masonry">
    <div class="tiny-masonry__item">
        <div class="tiny-masonry__item-inner">
            <img src="/demo.jpg" loading="lazy" /><span>1</span>
        </div>
    </div>
    ...
</div>