I want to be able to provide the DOM element of the container directly instead of through a selector. In my use-case there is no unique selector for the container.

When this happens, gutterX is modified and never recovers

if (this.getCount() == 1) {
    // gutterX is modified and will never be restored
    this.conf.gutterX = this.conf.ultimateGutter;
    this._count = 1;
}

if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) {
    // gutterX is modified and will never be restored
    this.conf.gutterX = 0;
}

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');
  
});

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

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.

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

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

Hello Scope from Bordeaux! Thank you for this project, this is Michael from https://bestofjs.org/.

I was about to add the project to Best of JS (under the tag "layout") when I noticed a typo about "dependency" word (well actually it's my browser who showed me the typo in the input field where I was pasting project's description 😅).

While I was there, Google suggested me some other corrections I'm including in the PR.

Feel free to merge or ignore because I'm also French and I may be wrong!

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.

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

https://github.com/Spope/MiniMasonry.js/blob/c4b5f7f8de818323392b96fb42fc2e7d14ed129f/build/minimasonry.esm.js#L45

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

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?

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?

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.

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.