PHP 結合 jQuery 與 AJAX 實現瀑布流特效：完整前後端程式碼解析
編輯：PHP 綜合知識
架構概覽
- 前端：PHP 迴圈輸出首屏資料 → jQuery Waterfall 插件初始化 → 滾動觸發
getResource 回呼 → AJAX 請求後端 API → 渲染追加。
- 後端：
actionListXiaohua 讀取資料 → CJSON::encode 輸出 JSON。
- 插件核心：多欄佈局計算、圖片載入同步、插入策略（最短欄/輪流）、滾動/縮放事件節流。
前端視圖層（PHP + HTML + JS 設定）
getMyVal('category', $_GET);
$list = Xiaohua::model()->getXiaohao($category); // 首屏資料
?>
後端控制器動作
public function actionListXiaohua() {
$list = Xiaohua::model()->getXiaohua(); // 取得笑話資料
echo CJSON::encode($list); // 輸出 JSON 陣列
}
Waterfall 插件核心邏輯（關鍵點註解）
;(function($) {
var setting = { /* 預設配置 */ };
var $waterfall = null, waterfall = { load_index: 0 };
$.fn.waterfall = function(opt) {
setting = $.extend(setting, opt);
$waterfall = waterfall.$waterfall = $(this);
waterfall.$columns = creatColumn(); // 建立欄位 DOM
render($waterfall.find(setting.cell_selector).detach(), false); // 首屏重排
bindScrollResize(); // 綁定事件
};
function creatColumn() {
waterfall.column_num = calculateColumns();
var html = '';
for (var i=0; i ';
}
$waterfall.prepend(html);
return $('.'+setting.column_className, $waterfall);
}
function calculateColumns() {
return Math.max(1, Math.floor($waterfall.innerWidth() / (setting.column_width + setting.column_space)));
}
function render(elements, fadein) {
if (!elements.length) return;
var $cols = waterfall.$columns;
elements.each(function(i) {
var $el = $(this);
// 非圖片或不需等圖片高度 -> 直接插入
if (!setting.auto_imgHeight || setting.insert_type==2 || !$el.is('img') && !$el.find(setting.img_selector).length) {
insert($el, i, fadein); return;
}
// 等圖片載入
var img = new Image();
img.onload = img.onreadystatechange = function() {
if (!this.readyState || this.readyState==='complete') {
insert($el, i, fadein);
img.onload = img.onreadystatechange = null;
}
};
img.src = $el.is('img') ? $el.attr('src') : $el.find(setting.img_selector).attr('src');
});
}
function insert($el, i, fadein) {
var $target = setting.insert_type === 1
? $cols.eq(calculateLowest()) // 最短欄
: $cols.eq(i % waterfall.column_num); // 輪流
if (fadein) $el.css('opacity',0).appendTo($target).fadeTo(setting.fadein_speed,1);
else $el.appendTo($target);
}
function calculateLowest() {
var min = $cols.eq(0).outerHeight(), idx = 0;
$cols.each(function(i) { if ($(this).outerHeight() < min) { min = $(this).outerHeight(); idx = i; } });
return idx;
}
function bindScrollResize() {
$(window).on('scroll', debounce(function() {
var $lowest = $cols.eq(calculateLowest());
var bottom = $lowest.offset().top + $lowest.outerHeight();
if ($(window).scrollTop() + $(window).height() > bottom - 100) {
render(getElements(), true);
}
}, 300));
$(window).on('resize', debounce(function() {
if (calculateColumns() !== waterfall.column_num) {
var $cells = $waterfall.find(setting.cell_selector).detach();
waterfall.$columns.remove();
waterfall.$columns = creatColumn();
render($cells, false);
}
}, 300));
}
function getElements() {
return setting.getResource(++waterfall.load_index, public_render);
}
function public_render(elems) { render(elems, true); }
function debounce(fn, ms) { var t; return function() { clearTimeout(t); t = setTimeout(fn, ms); }; }
})(jQuery);
純 CSS + JS 替代方案（原文附錄版）
標題
載入中...
關鍵差異與選型建議
| 維度 | Waterfall 插件版 | 簡易版 |
|---|
| 圖片高度同步 | 支援 auto_imgHeight 等待 onload | 需自行處理或預設高度 |
| 插入策略 | 最短欄 / 輪流 可配置 | 固定最短欄 |
| 視窗縮放重排 | 完整支援 | 需手動觸發 layout() |
| 淡入動畫 | 內建 fadein | CSS opacity + transition |
| 程式碼複雜度 | 高（約 300 行） | 低（約 50 行） |
| 適用場景 | 生產環境、複雜佈局、需高度同步 | 原型驗證、簡單畫廊、固定比例圖片 |
總結
瀑布流核心在於動態多欄佈局算法與滾動觸發分頁加載。Waterfall 插件提供生產級完整功能（圖片同步、重排、動畫、策略配置），簡易版適合快速原型。現代專案建議優先評估 CSS Columns / Grid + IntersectionObserver 原生方案，僅在需要精確控制插入順序、支援舊瀏覽器時引入 JS 計算庫。
- 上一篇文章： PHP trim() 函式去除字串首尾空白與特殊字元完整指南
- 下一篇文章： PHP 7.0 核心新特性深度解析：標量型別、返回型別、太空船運算子與效能躍升
Copyright ©
程式碼之家 All Rights Reserved
