これまで実務でMasonryレイアウトを使うことが何度かありました。
- Pinterest風に横方向へ詰めたい
- 画像の高さがバラバラ
- lazyloadや無限スクロールにも対応したい
- WordPressでも使いたい
でも既存のライブラリは
- jQuery前提だったり
- imagesLoaded必須だったり
- ちょっと重かったり
「もう自分で作ったほうが早いな…」と思って作ったのが
MasonryFlow です。
MasonryFlowとは？
📦 npm
https://www.npmjs.com/package/@neruco/masonry-flow
Pinterest風に「横方向へ詰める」absolute方式のMasonryライブラリです。
特徴
- jQuery不要（Vanilla JS）
- imagesLoaded不要
- ResizeObserver / MutationObserverで高さ変化に追従
- lazyload対応
- 画像decode待機オプションあり
- フェード / stagger 表示対応
- WordPress直置きOK（IIFEビルドあり）
なぜimagesLoadedを使っていないのか
従来のMasonryは、
imagesLoaded(container, function() {
masonry.layout();
});
のように「画像が読み込まれてから再計算」する設計が多いです。
でもそれって、
- 追加依存が増える
- ライブラリが重くなる
- 画像以外の高さ変化に弱い
そこで今回は
- ResizeObserver
- MutationObserver
- requestAnimationFrame
を使って「高さが変わったら自動再レイアウト」する設計にしました。
これで
- lazyload
- フォント読み込み
- キャプション開閉
- 無限スクロール
全部に追従できます。
使い方（npm）
npm i @neruco/masonry-flow
import { MasonryFlow } from "@neruco/masonry-flow";new MasonryFlow("[data-masonry]", {
gap: 16,
minWidth: 240
});
HTMLはこれだけ。
<div class="masonry" data-masonry>
<a class="masonry__item"><img src="..." /></a>
<a class="masonry__item"><img src="..." /></a>
</div>
WordPressでも使える
IIFEビルドも用意しているので、
<script src="/assets/js/masonry-flow.iife.js"></script>
<script>
MasonryFlow.MasonryFlow.autoInit();
</script>
でそのまま使えます。
ブロックテーマでも、クラシックテーマでもOK。
フェード＋staggerも可能
オプションで
- 1要素ずつ上からフェードイン
- 画像decode完了後に表示
- スクロール連動アニメ
も可能です。
Pinterestっぽい「ぬるっと出る感じ」も再現できます。
作ってみて思ったこと
正直なところ、
「ライブラリを作る」よりも
「npm公開まで持っていく」ほうが大変でした。
- Viteのlib build
- ESM / IIFE / UMD対応
- Nodeバージョン問題
- npm認証エラー
- GitHub Pagesデモ構築
でも、ここまでやると
「使えるコード」から「プロダクト」になる感覚がありました。
まとめ
MasonryFlowは、
「実務で本当に欲しかったMasonry」を形にしたものです。
もし
- jQueryなしでMasonryを使いたい
- WordPressで扱いやすいものが欲しい
- 画像依存を減らしたい
という方がいたら、ぜひ使ってみてください。
👉 https://www.npmjs.com/package/@neruco/masonry-flow
- PR
