Adding a destroy method to properly remove instances.

[ghost]

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

[Spope]

Thanks for filling this issue, I see 2 things here :

• Right now each instance of Minimasonry listen to the resize event on the window. So instanciating 3 Minimasonry will indeed add 3 resize event listeners on the window. We could do better but I try to keep the scope of this library as small as possible.
• In your specific case (SPA like) you are creating new instances of Minimasonry on page change but without any method to destroy previous ones. So I have to add a destroy method. You'll need to keep track of you instances to properly remove them before creating new ones.

I am renaming this issue to reflect that.

Thanks again for the issue !

[ghost]

Yes, I tried to use MiniMasonry + pjax and found that a perfect flicker-free masonry layout can be achieved after the page jumps, but pjax needs to call the method again every time it jumps, which also leads to the repeated addition of events.

I have also checked the examples of using pjax on other websites, and found that it will be added repeatedly in the event list.

It is normal to think about it later, most plug-in instances will not think of matching with page rendering processing mechanisms such as pjax.

Of course, I think pjax is a double-edged sword. If use pjax, can indeed load the page without refreshing, but the structural design of the page and the design of the script may change the style.

I don't plan to use pjax now, because pjax is not easy to control, so you don't have to deal with this problem.

The MiniMasonry construction of CSS gradient transparency can also ignore the absolute overlapping appearance of elements.

[Spope]

I reopen this issue as it might not be needed anymore for you but a destroy method is definitely something I will add.