dede瀑布流手机端如何实现自适应布局？-DEDE建站-盈思创科技

瀑布流（Waterfall Flow）是一种非常流行的网页布局方式，特别适合展示图片、文章卡片等内容，其特点是每列的高度不固定，像瀑布一样自然流淌。

（图片来源网络，侵删）

下面我将分为几个部分来详细说明：

核心原理
实现步骤（推荐使用现成插件）
手机端适配的关键
手动调整与优化

核心原理

DedeCMS 本身不自带瀑布流功能，所以我们需要通过以下方式实现：

前端库/插件：使用成熟的前端 JavaScript 库，最著名的是 Masonry，它会自动计算每个卡片的高度，并将其放置在当前列中高度最低的位置下方。
后端数据：DedeCMS 需要提供数据（文章列表、产品列表等），这些数据通常通过 {dede:arclist} 或 {dede:loop} 等标签调用，并以 HTML 结构（如 <div class="item">...</div>）输出。
响应式布局：使用 CSS Flexbox 或 Grid 来实现列数的自适应（手机1列，平板2列，桌面3-4列）。

工作流程：

页面加载时,DedeCMS 后端通过模板标签生成文章卡片的 HTML 结构。
前端 JavaScript 库（如 Masonry）监听页面加载完成事件。
库获取所有文章卡片的 DOM 元素，并根据设定的列数和间距，进行动态布局计算和排列。
当用户滚动页面加载更多内容时,库会继续对新加载的卡片进行布局计算（无限滚动/懒加载）。

实现步骤（推荐使用现成插件）

对于大多数用户来说,手动编写代码比较复杂，直接使用现成的织梦瀑布流插件是最高效、最稳妥的方法。

（图片来源网络，侵删）

推荐插件：dedecms_masonry

这是一个非常流行且维护良好的织梦瀑布流插件,支持响应式和无限滚动。

安装步骤：

下载插件：
（图片来源网络，侵删）
- 在织梦官方论坛、DedeCMS吧或一些知名的织梦资源网站（如 Dedecms8）搜索 “dedecms_masonry” 或 “织梦瀑布流插件”。
- 下载插件压缩包,通常包含一个 uploads 文件夹和一个安装说明文件。
上传文件：
- 将 uploads 文件夹内的内容，通过 FTP 上传到你网站根目录下的 uploads/ 文件夹中（如果文件夹不存在则创建）。
- 根据安装说明,可能还需要上传一些 PHP 文件到网站根目录或 include/ 目录。
后台安装：
- 登录你的 DedeCMS 后台。
- 进入 “系统” -> “插件管理” -> “插件安装”。
- 点击 “选择插件包”，找到你刚刚上传的插件安装包（通常是 .zip 文件）。
- 点击 “安装”，系统会自动完成安装。
调用插件：
- 插件安装成功后,它会提供一个调用标签，通常类似 {dede:masonry row='3' col='3'}...{/dede:masonry}。
- 你需要在你想要显示瀑布流的模板文件（index.htm, list_article.htm 等）中使用这个标签。
- 标签内，你需要放置标准的织梦内容调用标签，如 {dede:arclist}。

示例代码（在 list_article.htm 中）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:global.cfg_webname/}</title>
    <!-- 引入 jQuery 和 Masonry 库 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/masonry/4.2.2/masonry.pkgd.min.js"></script>
    <!-- 引入插件提供的 CSS 文件（如果有的话） -->
    <link rel="stylesheet" href="{dede:global.cfg_cmsurl/}/uploads/masonry/css/masonry.css">
</head>
<body>
    <h1>文章列表 - 瀑布流</h1>
    <!-- 使用瀑布流插件标签 -->
    <div class="waterfall-container">
        {dede:masonry}
            {dede:arclist row='12' titlelen='30'}
            <div class="item">
                <a href="[field:arcurl/]">
                    <!-- 如果文章有缩略图 -->
                    <img src="[field:litpic/]" alt="[field:title/]">
                    <h3>[field:title/]</h3>
                </a>
                <p>[field:description function='cn_substr(@me,100)'/]...</p>
            </div>
            {/dede:arclist}
        {/dede:masonry}
    </div>
    <!-- 初始化 Masonry 布局 -->
    <script>
        $(document).ready(function(){
            $('.waterfall-container').masonry({
                // 列数，通常由 CSS 控制，这里可以设置列宽
                itemSelector: '.item',
                columnWidth: '.item', // 指定为 item 的宽度
                gutter: 15 // 卡片之间的间距
            });
        });
    </script>
</body>
</html>

注意：具体调用方法和参数请务必参考你所下载插件的 官方说明文档，不同插件可能略有差异。

手机端适配的关键

瀑布流在手机端体验的核心是响应式布局，即根据屏幕宽度自动调整列数，这主要通过 CSS 来实现。

方法：使用 CSS Flexbox 或 Grid

这是现代网页布局的最佳实践,比用 JavaScript 动态改变列数更高效、更可靠。

示例 CSS (推荐 Flexbox)：

/* .waterfall-container 是瀑布流的外层容器 */
.waterfall-container {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 允许项目换行 */
    flex-wrap: wrap;
    /* 设置项目之间的间距 */
    gap: 15px; /* 代替了 Masonry 的 gutter */
    /* 对齐方式，确保项目从左上开始排列 */
    justify-content: flex-start;
}
/* .item 是瀑布流的每个卡片 */
.item {
    /* 关键：设置一个固定的宽度，但百分比响应 */
    width: calc(33.333% - 10px); /* 桌面端3列，减去部分间距 */
    /* 卡片内部使用 block 布局 */
    display: block;
    margin-bottom: 0; /* 外层 gap 已经处理了垂直间距 */
}
/* 手机端适配 */
@media screen and (max-width: 768px) {
    .waterfall-container {
        /* 手机端只显示一列 */
        gap: 10px;
    }
    .item {
        /* 手机端宽度占满容器 */
        width: 100%;
    }
}
/* 平板端适配 (可选) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .item {
        width: calc(50% - 10px); /* 平板端显示两列 */
    }
}

为什么这样设计？

外层 .waterfall-container：
- display: flex;：开启弹性盒子布局。
- flex-wrap: wrap;：允许子元素（.item）在一行放不下时自动换行。
- gap: 15px;：这是现代 CSS 的属性，直接设置子元素之间的水平和垂直间距，非常方便。
内层 .item：
- width: calc(33.333% - 10px);：设置一个百分比宽度，calc() 函数用于精确计算，减去间距，确保总宽度不会超出容器。
- display: block;：确保 <a> 或 <img> 等内联元素能撑满整个 .item 的宽度。
媒体查询 @media：
- 当屏幕宽度小于 768px 时（通常定义为手机端），将 .item 的宽度设置为 100%，这样每行就只显示一个卡片。
- 你可以轻松添加平板端的规则,如 width: 50%，实现两列布局。

与 Masonry 的配合：在这种模式下，Masonry 的作用就不再是“动态布局”，而是“高度自适应排序”，因为每行的宽度是固定的，高度不定的卡片由 Masonry 负责垂直方向上的错落排列，而 Flexbox 负责响应式的列数控制，两者结合，效果完美。

手动调整与优化

如果你不想用插件,或者想对现有代码进行深度优化，可以手动实现。

修改模板文件：在 list_article.htm 中，用标准的 {dede:arclist} 循环生成卡片，并给每个卡片加上 .item 类。
编写 CSS：按照上面第3部分提到的，使用 Flexbox + Media Query 的方式编写响应式 CSS。
引入和初始化 Masonry：在页面底部，引入 jQuery 和 Masonry 的 JS 文件，并编写初始化脚本。

手动实现的优缺点：

优点：代码完全由自己控制，灵活性高，不依赖第三方插件的更新。
缺点：工作量较大，需要自己处理无限滚动、图片加载优化等细节，容易出现兼容性问题。

方案	优点	缺点	适合人群
使用现成插件	简单快捷，功能完善（含无限滚动），有文档支持	依赖插件作者的维护，可能臃肿	绝大多数用户，特别是新手
手动实现	完全可控，代码轻量，学习价值高	复杂，工作量大，需要处理各种细节	有一定前端基础，追求极致定制化的开发者

给您的最终建议：

优先使用 dedecms_masonry 这类成熟的插件，它能让你最快地实现效果，并解决无限滚动等复杂问题，再通过自定义 CSS（特别是媒体查询）来优化手机端的显示效果，确保在不同设备上都有良好的体验。

dede瀑布流手机端如何实现自适应布局？

核心原理

实现步骤（推荐使用现成插件）

手机端适配的关键

手动调整与优化

相关文章

目录[+]