tiny-components
/
masonry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 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.
9 Commits
1 Branch
4 Tags
17 MiB
 
 
 
 
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ad7e21a305'
${ noResults }
Go to file
HerrHase ad7e21a305
adding bugfix for url 		10 months ago
example change behavior for gettings elements, smaller bugfix 10 months ago
src change behavior for gettings elements, smaller bugfix 10 months ago
.gitignore change behavior for gettings elements, smaller bugfix 10 months ago
LICENSE adding 3 years ago
README.md adding 3 years ago
package-lock.json adding 3 years ago
package.json adding bugfix for url 10 months ago
webpack.mix.js adding 3 years ago

README.md

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>