npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gyurielf/masonry

v1.0.2

Published

A simple masonry library written in TypeScript

Downloads

115

Readme

masonry

masonry

A simple masonry library written in TypeScript.

The masonry library we need, but don't deserve. Uses pure JavaScript and should be compatible with most browsers.

This fork has been fixed the main gutter issues and gives more features.

Installation

npm install @gyurielf/masonry

Usage

import { Masonry } from '@gyurielf/masonry';

const options = { gutter: 1.5, gutterUnit: 'rem', columnBreakpoints: { 960: 2, 740: 1 } };
const masonry = new Masonry(document.getElementById('masonry'), options);

Options

columns: number (default: 4) the number of columns to render. Column widths are calculated via percentage - gutter (calc((100 / columns)% - gutter)).

gutter: number (default: 10) the size of the gutter between columns and rows.

gutterUnit: string (default px) the unit of measurement to use when applying the gutter to the masonry grid (could be any valid unit of measurement px, %, rem, em, etc.)

columnBreakpoints: Record<number, number> (default undefined) Most Masonry scenarios require some form of responsiveness. Setting this property allows you to set the number of columns to be used for different viewport width(s) in the format of { [width: number]: [columns: number] }. Example:

// viewports with the width of <= 920 will get 2 columns
// viewports with the width of <= 740 will get 1 column
// Any other viewport width will get whatever value you've set for `columns`
const columnBreakpoints = { 960: 2, 740: 1 };

gutterBreakpoints: Record<number, number> (default undefined) Most Masonry scenarios require some form of responsiveness. Setting this property allows you to set the number of columns to be used for different viewport width(s) in the format of { [width: number]: [gutter: number] }. Example:

// viewports with the width of <= 920 will get 10 (gutterUnit) gutter
// viewports with the width of <= 740 will get 30 (gutterUnit) gutter
// Any other viewport width will get whatever value you've set for `gutter`
const gutterBreakpoints = { 960: 10, 740: 30 };

initOnImageLoad: boolean (default: false) Will initialize the Masonry exactly after all the images inside the container are loaded. This is done in an event-based way, so no need for any Promise polyfills or 3rd party libraries.

loadingClass: string (default: masonry-loading) Loading class to add to the Masonry container whilst waiting for images inside it to load. This is done with the idea that you might want to hide the container before its images are loaded and Masonry initialized. Example:

#masonry {
  transition: opacity 0.25s;
}

#masonry.masonry-loading {
  opacity: 0;
}

loadedClass: string (default: masonry-loaded) Class to add to the Masonry container after it's done loading.

onInit: () => void An optional callback for when the Masonry is finished calculating and setting itself up. NB: this is called every time init() is called to recalculate things

bindOnScroll: boolean (default: true) Controls whether the event listener for reintialization on window.resize is bound or not. If you don't want responsive columns, you may also not want to have the Masonry listening to window.resize needlessly.

useContainerWidth: boolean (default: false) Should the Masonry use the container's width instead of the viewport's width when calculating responsive column count?

trackItemSizeChanges: boolean (default: false) Should the Masonry track the changes in size for all the items inside of it and re-initialize on size change? This uses ResizeObserver, if you want to use this feature and support legacy browsers, it's a good idea to add a polyfill for it to your project.

API

constructor(private masonryContainer: any, options?: MasonryOptions) The constructor. masonryContainer can be any valid DOM node / Element. When called it automatically initializes the masonry using masonryContainer as the container element and binds init() (debounced) on window resize (see dispose() on how to clear said binding, if needed).

init(): void Recalculates and initializes all the masonry columns. Called on object construction and window resize. If you need to re initialize your grid for some reason, you can call this method to do so.

dispose(): void Unbinds all DOM event listeners bound by this Masonry instance. If you're using this library inside of a framework, you should probably call this method during your destroy lifecycle hook (onDestroy(), destroyed(), componentWillUnmount(), etc.).

Credits for Momchil Georgiev.