本文讲解如何通过单次数据库查询获取全部分类，并在循环中动态分配 col-md-3 与 col-md-6 布局类，彻底解决因重复调用相同查询导致的分类名称重复、顺序错乱问题。
本文讲解如何通过单次数据库查询获取全部分类，并在循环中动态分配 `col-md-3` 与 `col-md-6` 布局类，彻底解决因重复调用相同查询导致的分类名称重复、顺序错乱问题。
在响应式前端布局中，常见需求是将前 4 个分类以 col-md-3（每行 4 列）展示，第 5 个分类则使用更醒目的 col-md-6（占半屏）样式。但若像原始代码那样两次独立执行相同条件的查询（limit(4) 和 limit(1)），不仅造成冗余数据库请求，更关键的是：两次查询未指定排序规则（如 ORDER BY id ASC），数据库可能返回任意顺序的记录——导致第二次查询大概率取到前 4 个中的某一个，造成视觉重复。
✅ 正确做法是：一次查出全部 5 条数据，再在 PHP 循环中按索引动态控制 HTML 结构与 CSS 类名。以下是优化后的完整实现：
<?php // 一次性获取全部 5 个顶级分类，并按 ID 升序确保稳定顺序
$this->db->limit(5);
$this->db->order_by('id', 'ASC'); // 关键！保证结果顺序一致
$categories = $this->db->get_where('category', array('parent' => 0))->result_array();
foreach ($categories as $index => $category):
// 索引从 0 开始：第 0~3 项 → col-md-3；第 4 项（即第 5 个）→ col-md-6
$isFifthItem = ($index === 4);
$galleryClass = 'gallery-item' . ($isFifthItem ? ' gallery-item-second' : '');
?>
<div class="<?php echo $galleryClass; ?>">
<div class="grid-item-holder">
<div class="listing-item-grid">
@@##@@" alt="<?php echo htmlspecialchars($category['name']); ?>">
<div class="listing-counter">
<span>2</span> Locations
</div>
<div class="listing-item-cat">
<h3>
<a href="<?php%20echo%20site_url('home/filter_listings?category='%20.%20slugify(%24category['name'])%20.%20'&amenity=&video=0&status=all');%20?>">
<?php echo htmlspecialchars($category['name']); ?></a>
</h3>
<p><?php echo htmlspecialchars($category['name']); ?></p>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
? 关键优化点说明：
-
去重 & 稳定性：
order_by('id', 'ASC')确保每次查询返回相同顺序的 5 条记录，杜绝随机重复； - 性能提升：数据库仅执行 1 次查询，减少 I/O 开销和连接压力；
-
结构清晰：使用
$index === 4精准识别第五项，语义明确，易于维护； -
安全加固：对输出的分类名称使用
htmlspecialchars()防止 XSS；图片alt属性也做了内容转义； -
语义化类名：
gallery-item-second作为扩展类，便于 CSS 独立控制样式，不破坏基础结构。
⚠️ 注意事项：
- 若分类总数不足 5 条，请在循环前添加
count($categories) >= 5校验，或使用array_pad()补齐空数据，避免布局错位； -
slugify()函数需确保已定义且能正确处理中文/特殊字符（推荐使用url_title()或mb_strtolower()+ 正则替换）； - Bootstrap 栅格系统依赖父容器为
.row，请确认外层 HTML 包含
通过该方案，你不仅能精准呈现 5 个不重复的分类，还能获得更健壮、可维护、高性能的模板逻辑——这才是 MVC 框架中视图层应有的实践方式。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
