织梦瀑布流产品列表-织梦建站-盈思创科技

瀑布流（Waterfall Flow）是一种流行的网页布局，特点是等宽不等高的元素排列，像瀑布一样自然地向下流动，视觉效果非常好，特别适合展示图片、产品等内容。

（图片来源网络，侵删）

实现瀑布流主要有两种主流技术：

CSS Column (多列布局)：最简单、性能最好的方法，但兼容性稍差（不支持IE9及以下）。
JavaScript (如 Masonry, Isotope)：兼容性好，功能强大，但需要引入JS库,性能略逊于CSS方法。

考虑到织梦的普及场景和现代浏览器的使用率，我们强烈推荐使用第一种方法（CSS Column），因为它最简单、最稳定。

整体思路

创建模板文件：创建一个用于展示产品列表的模板文件（如 product_waterfall.htm）。
编写HTML结构：在模板中，使用一个容器包裹所有的产品项,每个产品项是一个独立的盒子。
编写CSS样式：使用 column-count 和 column-gap 属性来创建多列布局，并设置每个产品项的 break-inside: avoid; 来防止盒子被列分割。
调用织梦数据：使用织梦的 {dede:arclist} 或 {dede:list} 标签来循环输出产品数据,并填充到HTML盒子中。
创建栏目和页面：在后台创建一个栏目，选择我们制作的模板,并生成该栏目的列表页。

详细步骤

第一步：创建模板文件 `product_waterfall.htm`

在你的织梦模板目录（通常是 /templets/你的模板名/）下，新建一个名为 product_waterfall.htm 的文件。

第二步：编写模板代码

将以下代码完整复制到 product_waterfall.htm 文件中，代码包含了完整的HTML、CSS和织梦标签调用。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">瀑布流产品列表 - {dede:global.cfg_webname/}</title>
    <style type="text/css">
        /* 1. 重置和基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .main-title {
            text-align: center;
            font-size: 28px;
            margin-bottom: 30px;
            color: #333;
        }
        /* 2. 瀑布流容器核心样式 */
        .waterfall-container {
            /* 关键属性：将内容分成3列 */
            column-count: 3; 
            /* 列之间的间隔 */
            column-gap: 20px; 
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* 3. 每个产品项的样式 */
        .waterfall-item {
            /* 关键属性：防止盒子被列分割，保证一个盒子完整显示在一列中 */
            break-inside: avoid; 
            background: #fff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px; /* 项目之间的垂直间距 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .waterfall-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        /* 4. 产品图片样式 */
        .waterfall-item img {
            width: 100%;
            height: auto;
            border-radius: 5px;
            display: block;
            margin-bottom: 10px;
        }
        /* 5. 产品信息样式 */
        .waterfall-item h3 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .waterfall-item .summary {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 10px;
            height: 40px; /* 固定高度，避免文字过多撑开盒子 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 最多显示两行 */
            -webkit-box-orient: vertical;
        }
        .waterfall-item .price {
            font-size: 20px;
            color: #e4393c;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .waterfall-item .view-btn {
            display: inline-block;
            padding: 8px 15px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            text-align: center;
        }
        .waterfall-item .view-btn:hover {
            background-color: #0056b3;
        }
        /* 6. 响应式调整 */
        @media (max-width: 992px) {
            .waterfall-container {
                column-count: 2;
            }
        }
        @media (max-width: 768px) {
            .waterfall-container {
                column-count: 2;
            }
        }
        @media (max-width: 576px) {
            .waterfall-container {
                column-count: 1;
            }
        }
    </style>
</head>
<body>
    <h1 class="main-title">我们的产品</h1>
    <div class="waterfall-container">
        <!-- 
          使用 {dede:arclist} 标签调用产品数据。
          请根据你的实际情况修改以下参数：
          - channelid: 你的产品模型ID，如果产品是“普通文章”，则不用设置。
          - typeid: 当前栏目的ID，如果想在所有产品中显示，可以删除此属性。
          - row: 显示数量。
          - titlelen: 标题长度。
          - infolen:摘要长度。
        -->
        {dede:arclist channelid='1' typeid='0' row='20' titlelen='30' infolen='100'}
        <div class="waterfall-item">
            <!-- 产品缩略图 -->
            <a href="[field:arcurl/]">
                <img src="[field:picname/]" alt="[field:title/]">
            </a>
            <!-- 产品标题 -->
            <h3><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h3>
            <!-- 产品摘要/描述 -->
            <p class="summary">[field:description function='cn_substr(@me, 100)'/]</p>
            <!-- 价格（如果你的产品模型有价格字段，请替换 'price' 为你的字段名） -->
            <p class="price">¥ [field:price/]</p>
            <!-- 查看详情按钮 -->
            <a href="[field:arcurl/]" class="view-btn">查看详情</a>
        </div>
        {/dede:arclist}
    </div>
</body>
</html>

第三步：代码详解

.waterfall-container (容器):
- column-count: 3;：这是核心,它告诉浏览器将这个容器内的内容分成3列。
- column-gap: 20px;：设置列与列之间的空白宽度。
.waterfall-item (产品项):
- break-inside: avoid;：这是瀑布流的另一个核心，它确保每个产品项盒子不会被分割到两列中,从而保证了每个产品都是完整的一块。
- margin-bottom: 20px;：设置每个盒子之间的垂直间距,让布局更松散美观。
织梦标签 {dede:arclist}:
- channelid='1'：非常重要！如果你的产品是使用“自定义模型”创建的，你需要在这里填入你的产品模型ID，如果只是用“普通文章”发布产品,可以删除这个属性。
- typeid='0'：表示调用所有栏目的产品，如果你想只在当前栏目下显示，请将 '0' 替换成当前栏目的ID。
- [field:picname/]：调用文章的默认图片。
- [field:arcurl/]：调用文章的链接地址。
- [field:title/]：调用文章标题。
- [field:description function='cn_substr(@me, 100)'/]：调用文章摘要，并用 cn_substr 函数截取前100个字符。
- [field:price/]：注意：如果你的产品模型有一个名为“price”的字段，这样调用是没问题的，如果你的字段名不是 price，请务必修改成你自己的字段名，[field:product_price/]。
响应式 @media:
- 我们通过媒体查询，在不同屏幕尺寸下改变 column-count 的值，实现了在PC端显示3列，平板显示2列,手机显示1列的响应式效果。

第四步：在织梦后台应用模板

创建栏目：
- 登录织梦后台，进入【栏目管理】->【添加栏目】。
- 填写栏目名称（如“瀑布流产品”）。
- 在“栏目列表选项”中，选择“列表”。
- 关键步骤：在“列表模板”选项中，点击下拉菜单，选择我们刚刚创建的 product_waterfall.htm。
- 设置好其他选项后，点击“确定”。
：
- 进入刚才创建的栏目，点击【添加内容】。
- 像发布普通文章一样填写标题、选择缩略图、填写摘要和价格（如果你有自定义字段的话）。
- 发布几篇文章。
生成页面：
- 回到【栏目管理】，找到你创建的“瀑布流产品”栏目。
- 点击栏目右侧的【更新】按钮。
- 在弹出的页面中，勾选“生成HTML”，然后点击“开始执行生成”。

访问你生成的栏目页面,就能看到一个漂亮的瀑布流产品列表了！

高级进阶：使用JavaScript方法 (Masonry)

如果你需要更复杂的交互，或者需要兼容非常古老的浏览器,可以考虑使用JavaScript。

引入Masonry库：在模板的 <head> 标签内引入Masonry的JS和CSS文件。

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

修改HTML结构：将容器和项目改为常见的DOM结构。

<div class="js-masonry" data-masonry-options='{ "columnWidth": ".waterfall-sizer", "itemSelector": ".waterfall-item" }'>
  {dede:arclist ...}
    <div class="waterfall-item">
      ... 内容 ...
    </div>
  {/dede:arclist}
  <!-- 一个看不见的尺寸元素，用于定义列宽 -->
  <div class="waterfall-sizer"></div>
</div>

编写CSS：

.js-masonry {
  width: 100%;
}
.waterfall-item {
  width: 200px; /* 定义一个基础宽度 */
  margin-bottom: 20px;
}
.waterfall-sizer {
  width: 200px;
}

初始化：在页面底部添加初始化脚本。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elem = document.querySelector('.js-masonry');
    var msnry = new Masonry(elem, {
      // options...
      itemSelector: '.waterfall-item',
      columnWidth: '.waterfall-sizer'
    });
  });
</script>

JavaScript方法更灵活，但实现起来也更复杂，性能开销也更大，对于绝大多数织梦网站，CSS Column方案已经足够优秀。

织梦瀑布流产品列表

整体思路

详细步骤

第一步：创建模板文件 `product_waterfall.htm`

第二步：编写模板代码

第三步：代码详解

第四步：在织梦后台应用模板

高级进阶：使用JavaScript方法 (Masonry)

相关文章

目录[+]

整体思路

详细步骤

第一步：创建模板文件 product_waterfall.htm

第二步：编写模板代码

第三步：代码详解

第四步：在织梦后台应用模板

高级进阶：使用JavaScript方法 (Masonry)

相关文章

目录[+]

第一步：创建模板文件 `product_waterfall.htm`