Responsive Pure JS Masonry
JavaScript & SCSS / 2025
Tools & Environment
Development
HTML / CSS / SCSS / JavaScript / Git
Pure JavaScript Masonry Layout
外部ライブラリに依存せず、バニラ JavaScript と SCSS のみで完結する軽量なメイソンリー（カード型）レイアウトの移植用テンプレート。画像の読み込み完了を検知して動的に高さを再計算し、画面幅に応じたレスポンシブ配置を再現します。
主な特徴と機能
依存ライブラリゼロ — jQuery や外部ライブラリを一切使わず、Pure JS
のみで動作するためプロジェクトへ素早く移植可能。
画像読み込み完了の自動検知 — Promise.all
を用いて全画像の読み込み完了を待機してからレイアウトを計算するため、画像の重なりや表示崩れを防止。
レスポンシブ＆アニメーション —
ウィンドウのリサイズに連動してカラム数を動的に切り替え。CSS Transition
による滑らかなカード移動を実現。