PHP + JavaScript 實作瀑布流佈局完整範例

前言

瀑布流（Masonry Layout）自 2012 年起風靡網路，蘑菇街、拖拉網等知名站點廣泛採用。本文提供一個精簡的 PHP + JS 瀑布流實作範例，無需資料庫即可快速在本地運行觀摩。

效果預覽

技術架構

• 後端：PHP 陣列模擬資料來源（無需資料表）
• 前端：JavaScript 計算元素位置，實現瀑布流排版
特點：程式碼極簡，專注展示核心邏輯，適合學習原理

快速部署

1. 下載範例檔案包
2. 放置於 PHP 開發環境（XAMPP、WAMP 等）
3. 瀏覽器開啟即可看到效果

核心邏輯說明

瀑布流核心在於「找出目前高度最小的欄位，將新元素放置其下方」。前端 JS 遍歷所有元素，計算各欄位當前高度，動態設定新元素的 position: absolute 座標。

延伸應用

實際專案中可將 PHP 陣列替換為資料庫查詢、API 串接，搭配無限滾動（Infinite Scroll）載入更多資料，構建完整瀑布流應用。