# Masonry Layout ใน JavaScript — Grid แบบ Pinterest --- ## บทนำ **Masonry Layout** คือรูปแบบ grid ที่ items มีความสูงต่างกัน แต่เรียงชิดกันโดยไม่มีช่องว่าง — แบบเดียวกับที่ Pinterest, Google Photos หรือ image gallery ส่วนใหญ่ใช้ JavaScript library ยอดนิยมสำหรับทำ Masonry คือ **Masonry.js** โดย David DeSandro --- ## ทำไม CSS Grid/Flexbox ไม่เพียงพอ? ``` ปัญหาของ CSS Grid สำหรับ Masonry: ┌──────┐ ┌──────┐ ┌──────┐ │ A │ │ B │ │ C │ │(tall)│ │(short│ │(tall)│ │ │ │) │ │ │ │ │ └──────┘ │ │ └──────┘ └──────┘ ↑ ช่องว่าง! CSS Grid จะเว้นช่องว่างตาม row height ที่สูงที่สุด Masonry จะเลื่อน D มาอยู่ใต้ B ทันที ไม่มีช่องว่าง ``` **หมายเหตุ**: CSS Grid กำลังเพิ่ม `grid-template-rows: masonry` แต่ยังเป็น experimental (2024) --- ## ติดตั้ง Masonry.js ### วิธีที่ 1: CDN ```html ``` ### วิธีที่ 2: npm ```bash npm install masonry-layout ``` ```javascript import Masonry from 'masonry-layout'; ``` ### วิธีที่ 3: ใช้ร่วมกับ imagesLoaded (แนะนำ) ```bash npm install masonry-layout imagesloaded ``` --- ## การใช้งานพื้นฐาน ### HTML ```html

Caption 1

A longer caption that takes more space

``` ### CSS ```css .grid { max-width: 1200px; margin: 0 auto; } .grid-item { width: calc(25% - 16px); /* 4 columns with 16px gap */ margin-bottom: 16px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .grid-item img { width: 100%; height: auto; display: block; } .grid-item p { padding: 12px; margin: 0; font-size: 14px; } /* Responsive */ @media (max-width: 900px) { .grid-item { width: calc(33.33% - 12px); } } @media (max-width: 600px) { .grid-item { width: calc(50% - 8px); } } @media (max-width: 400px) { .grid-item { width: 100%; } } ``` ### JavaScript ```javascript // วิธีพื้นฐาน const grid = document.querySelector('.grid'); const masonry = new Masonry(grid, { itemSelector: '.grid-item', columnWidth: '.grid-item', percentPosition: true, gutter: 16 }); ``` --- ## ปัญหาที่พบบ่อย: รูปยังโหลดไม่เสร็จ ```javascript // ❌ ปัญหา: Masonry จัดวางก่อนรูปโหลดเสร็จ // ทำให้ layout ผิดพลาด เพราะไม่รู้ความสูงที่แท้จริงของรูป const masonry = new Masonry(grid, { itemSelector: '.grid-item' }); // รูปยังโหลดอยู่ → height = 0 → จัดวางผิด ``` ```javascript // ✅ วิธีแก้: ใช้ imagesLoaded import Masonry from 'masonry-layout'; import imagesLoaded from 'imagesloaded'; const grid = document.querySelector('.grid'); imagesLoaded(grid, function() { // รูปทุกรูปโหลดเสร็จแล้ว const masonry = new Masonry(grid, { itemSelector: '.grid-item', columnWidth: '.grid-item', percentPosition: true, gutter: 16 }); }); ``` --- ## Infinite Scroll + Masonry ```javascript import Masonry from 'masonry-layout'; import imagesLoaded from 'imagesloaded'; const grid = document.querySelector('.grid'); let page = 1; let loading = false; // Init masonry const msnry = new Masonry(grid, { itemSelector: '.grid-item', columnWidth: '.grid-item', percentPosition: true, gutter: 16 }); // โหลดข้อมูลเพิ่ม async function loadMore() { if (loading) return; loading = true; try { const response = await fetch(`/api/photos?page=${page}&per_page=20`); const data = await response.json(); if (data.items.length === 0) { // หมดแล้ว window.removeEventListener('scroll', handleScroll); return; } // สร้าง HTML elements ใหม่ const fragment = document.createDocumentFragment(); data.items.forEach(item => { const el = createGridItem(item); fragment.appendChild(el); }); // เพิ่มเข้า DOM const newItems = Array.from(fragment.childNodes); grid.appendChild(fragment); // รอรูปโหลดแล้ว layout ใหม่ imagesLoaded(newItems, function() { msnry.appended(newItems); // แจ้ง masonry ว่ามี items ใหม่ page++; loading = false; }); } catch (err) { console.error('Failed to load:', err); loading = false; } } function createGridItem(item) { const div = document.createElement('div'); div.className = 'grid-item'; div.innerHTML = `

${item.title}

${item.description || ''}

`; return div; } // Scroll detection function handleScroll() { const scrollBottom = window.innerHeight + window.scrollY; const docHeight = document.documentElement.offsetHeight; if (scrollBottom >= docHeight - 300) { loadMore(); } } window.addEventListener('scroll', handleScroll); // โหลดครั้งแรก loadMore(); ``` --- ## ใช้ Masonry กับ React ```jsx import { useEffect, useRef } from 'react'; import Masonry from 'masonry-layout'; import imagesLoaded from 'imagesloaded'; function MasonryGallery({ items }) { const gridRef = useRef(null); const masonryRef = useRef(null); useEffect(() => { if (!gridRef.current) return; imagesLoaded(gridRef.current, () => { masonryRef.current = new Masonry(gridRef.current, { itemSelector: '.grid-item', columnWidth: '.grid-item', percentPosition: true, gutter: 16, }); }); return () => { // cleanup masonryRef.current?.destroy(); }; }, [items]); // re-init เมื่อ items เปลี่ยน return (

{items.map(item => (

{item.title}

))}

); } ``` --- ## ทางเลือกอื่น: Pure CSS Masonry ```css /* CSS Multi-column layout — ง่ายที่สุด แต่ลำดับไม่ถูก (บน-ล่าง ไม่ใช่ซ้าย-ขวา) */ .gallery { column-count: 4; column-gap: 16px; } .gallery-item { break-inside: avoid; /* ไม่ให้แตกกลางไอเท็ม */ margin-bottom: 16px; display: block; width: 100%; } @media (max-width: 900px) { .gallery { column-count: 3; } } @media (max-width: 600px) { .gallery { column-count: 2; } } ``` --- ## เปรียบเทียบ Library ต่างๆ | Library | Size | Performance | Features | |---------|------|-------------|---------| | **Masonry.js** | 8KB | ดี | Classic, battle-tested | | **Isotope** | 30KB | ดีมาก | Filter + sort + masonry | | **Muuri** | 20KB | ดีมาก | Drag & drop + animation | | **CSS columns** | 0KB | เร็วสุด | ลำดับผิด (column-first) | | **CSS Grid masonry** | 0KB | เร็วสุด | Experimental, ยังไม่ stable | --- ## Lazy Loading ร่วมกับ Masonry ```javascript // ใช้ Intersection Observer สำหรับ lazy load const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; // โหลดรูปจริง img.onload = () => { msnry.layout(); // จัด layout ใหม่หลังรูปโหลด }; observer.unobserve(img); } }); }); // สมัคร observe ทุกรูป document.querySelectorAll('.grid-item img[data-src]').forEach(img => { imageObserver.observe(img); }); ``` ```html

``` --- ## Performance Tips 1. **กำหนด width/height ของรูปใน HTML** เพื่อลด layout shift 2. **ใช้ `loading="lazy"`** สำหรับรูปที่อยู่นอก viewport 3. **Debounce resize event** เพื่อไม่ให้ layout ใหม่บ่อยเกิน 4. **ใช้ CSS transform แทน top/left** สำหรับ animation ที่นุ่มนวล ```javascript // Debounce resize let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { msnry.layout(); }, 200); }); ``` --- **วันที่อัปเดต**: 2026-04-30

SECURE_ACCESS

DOWNLOAD_LOCKED

Masonry Layout ใน JavaScript — Grid แบบ Pinterest

CONFIRM_DELETE