spope/minimasonry.js

Minimalist dependancy free Masonry layout library

MiniMasonry.js

Minimalist dependency free Masonry layout library

MiniMasonry is a lightweight dependency free Masonry layout. It will compute elements position in JavaScript and update their positions using CSS's transform attribute. This means positioning does not trigger browser layout and use the device's GPU. This also allows CSS animation during element positioning.

MiniMasonry is responsive, you give it a target width and it will adjust columns number and elements width. MiniMasonry will increase element width (until another column can fit in the layout) but will never reduce the target width.

Installation

You can install MiniMasonry by cloning the repository, downloading the build type (minimasonry.min.js / minimasonry.esm.js) or using npm :

npm install minimasonry

Then, include the minified version of MiniMasonry.js on your website :

<script src="node_modules/minimasonry/build/minimasonry.min.js"></script>

or use it via ESM :

import MiniMasonry from "minimasonry";

Usage

To use MiniMasonry you should have a container relatively positioned with your elements as children. Those children elements must be absolutely positioned.

Then you can initialise MiniMasonry :

var masonry = new MiniMasonry({
    container: '.masonry_transition'
});

Parameters

Here is the list of available parameters :

Name	Default value	Description
baseWidth (int)	255	Target width of elements.
container (string|HTMLElement)	Null	Container's selector or element. Required
gutter (int)	10	Width / height of gutter between elements. Use gutterX / gutterY to set different values.
gutterX (int)	null	Width of gutter between elements. Need gutterY to work, fallback to gutter.
gutterY (int)	null	Height of gutter between elements. Need gutterX to work, fallback to gutter.
minify (boolean)	true	Whether or not MiniMasonry places elements on the shortest column or keeps exact order of the list.
surroundingGutter (boolean)	true	Set left gutter on first columns and right gutter on last.
ultimateGutter (int)	5	Gutter applied when only 1 column can be displayed.
direction (string)	"ltr"	Sorting direction, "ltr" or "rtl".
wedge (boolean)	false	False will start to sort from center, true will start from left or right according to direction parameter.

API

Here is the list of available APIs :

Name	Description
layout()	If list has changed, trigger a relayout of the masonry.
destroy()	Remove the resize listener and set back container as it was before initialization.

MiniMasonry will add a "resize" event listener on the window to redraw the masonry on window resize. This listener is throttled to 66ms (15fps).

Example

See website

codepen

License

MIT

Made by Spope

minimasonry.js's Issues

Changing window size or zoom level collapses gutters

Hey there, thanks for such a clean, simple library!

Platform

macOS 12.6, Brave Version 1.45.113 Chromium: 107.0.5304.62 (Official Build) (arm64)

Setup

• Parent div, set to relative, which I apply minimasonry to
• Child divs, set to absolute (have the following Tailwind classes applied: absolute flex flex-col justify-between p-4 shadow-md border-l-4 bg-gray-100 border-gray-500 rounded-sm tracking-widest leading-loose mb-4

new MiniMasonry({
      baseWidth: 512, // Target width of elements.
      container: this.element, // Container selector or HTMLElement. Required.
      gutter: 16, // Width / height of gutter between elements. Use gutterX / gutterY to set different values.
      surroundingGutter: false, // Set left gutter on first columns and right gutter on last.
});

Description

I'm experiencing an issue where gutters between items are reduced in size as the result of resizing the window/viewport. All of the following screenshots were taken on the same page load (no refresh):

Default page load:

After reducing window size:

After increasing window size (after being reduced):

Images of other viewport sizes:

This happens on zoom level change too, not just window resize. This is after reducing and increasing and reducing zoom level a bunch:

Manually calling a redraw after window resize doesn't seem to have any effect. Looking at the library, it seems like a redraw automatically happens on resize, anyway.

Is there anything I can do to alleviate this, even if it's a bit hacky?

basewidth appears to have no effect.

Hello.

First, thanks for the nice tool.

I thought you might want to know that the "basewidth" parameter appears to have no effect.
Using your CodePen, you can recreate the issue there. Add the basewidth parameter and change the value to any number and nothing is different in the display.

Layout flows from left to right

When the number of elements is not enough to wrap, it will be displayed in the middle, which should be from left to right

Why should I not just only use native CSS Flexbox?

Hi Guys,

I spent little minutes just for the sake to understand what do you want to achieve with your project. I mean it might turn out I do not really understand what is going on here and why I should use your project and not just only Native Browser CSS Flex Box Layouts? If it turns out to be the case, would you might be so kind and explain more in your documentation what the benefit of your project is?

Thanks and best regards

Tim.

When there is 1 column, `.gutterY` is ignored

The line with this._count = 1; looks strange to me.

In my use-case I update MiniMasonry options on resize, depending on the CSS properties of the elements of the grid, and for some screen sizes there is only one column, even though there are many items (._count > 1).
And when there is only one columns with many items, the gutter between the items is missing.

My guess is that #L139 is the issue here, it "thinks" there is only one item and there is no need of margin-bottom, but in reality there is only one column with many items.

Multiple instances

Hi,

thank you for your little and great library..

I have one quick question, how would I add multiple masonry grids (each with its own set of rules.. gutter, width etc..) and one thing,, I can only use one class (for ex. .masonry) but I guess I need to document.querySelectorAll('.masonry') iterate each node right?

Thanks

[Feature suggestion] Set min number of columns

Thanks for this library, it works great.
My only suggestion would be an option to specify the minimum number of columns.

conserve gutter with Mobile

Hello,
Thanks for your library, she's light and does her job perfectly !

There's a little bug when you're viewport is less than 530px

// l62
this._count = Math.floor((this._width - this._gutter) / (this.conf.baseWidth + this.conf.gutter));

// 93
this._columns[shortest]  += this._sizes[index] + this.conf.gutter;//margin-bottom

you should prefer

// l62
this._count = Math.floor((this._width - this._gutter) / (this.conf.baseWidth + this._gutter));


// 93
this._columns[shortest]  += this._sizes[index] + this._gutter;//margin-bottom

Useless console.log message in the ESM version.

MiniMasonry.js/build/minimasonry.esm.js

Line 45 in c4b5f7f

console.log(this._currentGutterX);

Can we get rid of this?
It spams the console.

When the item has an image, it will collapse

When the image in the item is loaded slowly, the MiniMasonry will directly calculate the height of the current entity instead of the image, which leads to the inaccurate height of the container

Effect link refresh more times

Height issue

Hi, thanks for creating such an awesome library. I am facing an issue while images are loading, it is not getting their full height. I can't use fixed height in my case, so what the solution would be apart for fixed height for images?

How can I impact the width of the columns?

First of all, thank you for this library!
I got it working quite well, have a question about responsive though:
I want the grid to show only one column with 100% width on mobiles, 50% + gutter on tablets and 33% + gutter on desktops. So I don't have a fixed baseWidth. What approach would you use for this?

Also, I saw that there is a certain responsiveness but so far couldn't make out the pattern that is used.

problem when the height of the brick depends on its width

Hello !
Another little suggestion...

In my case, the height of each brick depends on its width (an image with a ratio). It's therefore important to define the new width of each brick before calculating its height (when you construct the array _sizes.) ?

l-87

for (var k = 0;k< children.length; k++) {
    children[k].style.width = Math.round(width) + 'px';
    this._sizes[k] = children[k].clientHeight;
}

have a good day

adding dir="rtl" creates a horizontal scroll

https://codepen.io/nawras/pen/VwbELpy

Adding a destroy method to properly remove instances.

I want to use minimasonry + pjax to realize the layout without refreshing the page, but when I encounter this, I will always add the resize event. I mentioned issues in pjax, and the other party suggested to delete the event addition when executing, but I can't remove the resize event.

Every time you jump to a page, you need to perform minimasonry once, but the old page events will remain in the address. I don't think the chance of resolution is very high, but I still want to ask for advice.

const postItemLayout = className => {
  const elemItem = document.querySelectorAll(className);

  if (elemItem.length > 0) {

    elemItem.forEach((ele, i) => {
      ele.setAttribute('data-minimasonry', `miniMasonry${i}`);
      new MiniMasonry({
        container: `[data-minimasonry=miniMasonry${i}]`,
        gutter: 14,
        surroundingGutter: false,
        ultimateGutter: 14
      })
    })

  }
}

//Every successful page Jump will be executed
document.addEventListener("pjax:success", function () {
  
  postItemLayout('.post-item-wrap');
  
});

//This will only be executed once
document.addEventListener("DOMContentLoaded", function () {
  pjax = new Pjax({
    elements: ["a"],
    selectors: ["main"],
    cacheBust: true
  });
  
  postItemLayout('.post-item-wrap');
  
});