dede图片瀑布流模板如何实现？-DEDE建站-盈思创科技

瀑布流布局是目前非常流行的图片展示方式,特点是非规则排列、错落有致，能极大地提升网站的视觉吸引力和用户体验，虽然 DedeCMS 本身没有内置瀑布流功能，但我们可以通过结合 CSS、JavaScript 和 DedeCMS 的标签轻松实现。

（图片来源网络，侵删）

下面我将从原理、实现步骤、完整代码示例三个方面为你进行详细说明。

瀑布流的基本原理

瀑布流的核心思想是：

容器: 有一个大的外层容器，所有图片卡片都放在里面。
列: 容器内部有多个固定宽度的列（Column），这些列通常使用 float: left 或 display: inline-block 进行横向排列。
卡片: 每个图片是一个独立的卡片，包含图片、标题、简介等。
定位: JavaScript 会实时监测每一列的高度，当添加一个新的图片卡片时，它会找到当前最短的那一列，然后将新卡片追加（append）到该列的末尾。
懒加载: 为了优化性能，通常还会结合懒加载技术，即当用户滚动到图片位置时，图片才真正开始加载。

实现步骤（以经典瀑布流为例）

我们将分步完成模板的制作。

第1步：创建模板文件

在 DedeCMS 的 /templets/ 目录下，创建一个新的文件夹，my_waterfall，然后在这个文件夹里创建以下文件：

（图片来源网络，侵删）

index.php (首页模板)
article_image.htm (列表页模板，专门用于展示图片列表)
imglist.js (瀑布流核心的 JavaScript 文件)
waterfall.css (瀑布流的样式文件)

第2步：编写 CSS 样式 (`waterfall.css`)

这是瀑布流的基础,定义了列和卡片的样式。

/* 瀑布流容器 */
.waterfall-container {
    width: 100%;
    margin: 0 auto;
    position: relative; /* 为绝对定位的子元素提供参考 */
}
/* 瀑布流的列 */
.waterfall-column {
    float: left;
    width: 250px; /* 每列的宽度，可以根据需要调整 */
    padding: 0 10px; /* 列间距 */
}
/* 图片卡片样式 */
.waterfall-item {
    margin-bottom: 15px; /* 卡片之间的垂直间距 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: #fff;
    overflow: hidden;
}
.waterfall-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0;
}
.waterfall-item-content {
    padding: 10px;
}
.waterfall-item-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.waterfall-item-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

第3步：编写 JavaScript 逻辑 (`imglist.js`)

这是实现瀑布流动态布局的核心,这里我们使用一个轻量级的库 Masonry，它非常成熟且易用。

你需要下载 jQuery 和 Masonry 库。
- jQuery: https://jquery.com/
- Masonry: https://masonry.desandro.com/
将下载的 jquery.min.js 和 masonry.pkgd.min.js 放在你的模板目录下，与 imglist.js 同级。
（图片来源网络，侵删）
编写 imglist.js 文件：

// 确保文档加载完成后再执行
$(document).ready(function() {
    // 初始化瀑布流布局
    $('.waterfall-container').masonry({
        // 指定瀑布流项目的选择器
        itemSelector: '.waterfall-item',
        // 指定列的选择器
        columnWidth: '.waterfall-column',
        // 动画选项，使布局变化更平滑
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
    // 如果需要懒加载，可以在这里集成 Lazy Load 等插件
    //  $("img.lazy").lazyload();
});

第4步：编写列表页模板 (`article_image.htm`)

这是最关键的一步,我们将 DedeCMS 的标签与 HTML 结构结合起来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/} - 图片列表</title>
    <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/waterfall.css" />
    <!-- 引入 jQuery 和 Masonry -->
    <script src="{dede:global.cfg_templets_skin/}/jquery.min.js"></script>
    <script src="{dede:global.cfg_templets_skin/}/masonry.pkgd.min.js"></script>
    <script src="{dede:global.cfg_templets_skin/}/imglist.js"></script>
</head>
<body>
    <div class="main">
        <h1>图片瀑布流展示</h1>
        <!-- 瀑布流容器开始 -->
        <div class="waterfall-container">
            <!-- DedeCMS 循环开始 -->
            {dede:list pagesize='12'}
            <div class="waterfall-item">
                <!-- 这里使用[field:picname/] 获取缩略图，[field:litpic/] 也可以 -->
                <!-- 如果没有缩略图，可以给一个默认图 -->
                <a href="[field:arcurl/]">
                    <img src="[field:picname/]" alt="[field:title/]" onerror="this.src='default.jpg';">
                </a>
                <div class="waterfall-item-content">
                    <h3 class="waterfall-item-title"><a href="[field:arcurl/]">[field:title/]</a></h3>
                    <p class="waterfall-item-desc">[field:description function='cn_substr(@me, 100)'/]...</p>
                </div>
            </div>
            {/dede:list}
        </div>
        <!-- 瀑布流容器结束 -->
        <!-- DedeCMS 分页 -->
        <div class="dede_pages">
            <ul class="pagelist">
                {dede:pagelist listsize='4'/}
            </ul>
        </div>
    </div>
</body>
</html>

代码解析:

{dede:list pagesize='12'}: 循环输出文章列表，pagesize='12' 表示每页显示12条。
.waterfall-container: 这是 Masonry 布局的容器。
.waterfall-item: 这是 Masonry 的“砖块”项目。
[field:picname/]: 获取文章的第一张图片（需要确保你在后台发布文章时上传了图片，并且文章模型支持）。
[field:arcurl/]: 获取文章的链接。
[field:title/]: 获取文章标题。
[field:description/]: 获取文章简介，并用 cn_substr 函数截取前100个字符。
{dede:pagelist/}: 输出分页链接。

第5步：设置和调用

上传文件: 将你创建的 my_waterfall 文件夹（包含所有 .css, .js, .php 文件）通过 FTP 上传到 /templets/ 目录下。
后台设置:
- 登录 DedeCMS 后台。
- 进入「模板管理」->「默认模板管理」。
- 找到「列表模板设置」，将「图片列表页模板」指向你刚刚创建的 article_image.htm。
- 确保「首页模板」等也正确设置。
:
- 发布文章时,务必上传至少一张图片，否则 [field:picname/] 会没有值。
- 可以创建一个专门的“图片”文章模型，方便管理。
生成页面:
在后台「生成」->「一键更新网站」，选择「更新栏目HTML」和「更新列表HTML」，然后生成对应的栏目列表页。

高级优化与注意事项

图片尺寸问题:
- 瀑布流的美感来源于不同高度的图片,如果你的所有缩略图都是固定尺寸（如 200x200），瀑布流就失去了意义。
- 解决方案: 在后台设置缩略图时，选择“宽度等比缩略”或“高度等比缩略”，并设置一个较大的尺寸（如 400px 宽），这样原始图片的长宽比就能被保留，生成的缩略图高度就会各不相同，形成瀑布流效果。

懒加载:

对于图片很多的网站,懒加载是必须的，可以显著提升首屏加载速度。

实现方法:

下载 jQuery Lazy Load 插件。
修改 article_image.htm 中的 <img> 标签，将 src 属性改为 data-src，并添加一个 src 属性指向一个占位图（如 1x1 像素的透明 GIF）。
```
<img class="lazy" data-src="[field:picname/]" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="[field:title/]">
```

修改 imglist.js，在 $(document).ready 中初始化 Lazy Load。

$(document).ready(function() {
    // 初始化瀑布流
    $('.waterfall-container').masonry({...});
    // 初始化懒加载
    $(".lazy").lazyload({
        effect: "fadeIn", // 淡入效果
        threshold: 200,   // 距离屏幕200px时开始加载
        failurelimit : 10 // 加载失败后尝试加载的次数
    });
});

无限滚动:
- 很多瀑布流网站采用无限滚动（即滚动到底部自动加载下一页）。
- 实现方法: 这需要更复杂的 JavaScript，通常通过 AJAX 请求下一页的数据，然后将其内容追加到现有列表中，并通知 Masonry 重新布局，可以使用 Infinite Scroll 插件结合 Masonry 实现。

制作 DedeCMS 的瀑布流模板，核心在于“HTML结构 + CSS样式 + JS库 + DedeCMS标签”的结合。

HTML结构：搭建瀑布流容器和卡片的骨架。
CSS样式：定义列宽、间距和卡片外观。
JS库：使用成熟的库（如 Masonry）来处理复杂的动态布局逻辑，比自己写要简单得多。
DedeCMS标签：通过 {dede:list} 循环填充动态内容。

按照以上步骤,你就可以成功地为你的 DedeCMS 网站打造一个美观且功能完善的图片瀑布流模板了。

dede图片瀑布流模板如何实现？

瀑布流的基本原理

实现步骤（以经典瀑布流为例）

第1步：创建模板文件

第2步：编写 CSS 样式 (`waterfall.css`)

第3步：编写 JavaScript 逻辑 (`imglist.js`)

第4步：编写列表页模板 (`article_image.htm`)

第5步：设置和调用

高级优化与注意事项

相关文章

目录[+]

瀑布流的基本原理

实现步骤（以经典瀑布流为例）

第1步：创建模板文件

第2步：编写 CSS 样式 (waterfall.css)

第3步：编写 JavaScript 逻辑 (imglist.js)

第4步：编写列表页模板 (article_image.htm)

第5步：设置和调用

高级优化与注意事项

相关文章

目录[+]

第2步：编写 CSS 样式 (`waterfall.css`)

第3步：编写 JavaScript 逻辑 (`imglist.js`)

第4步：编写列表页模板 (`article_image.htm`)