织梦瀑布流美女图片源码

核心功能说明

1. 瀑布流布局：前端使用 jQuery 的 waterfall 插件，根据图片尺寸自动排列,形成错落有致的视觉效果。
2. 无限滚动加载：当用户滚动到页面底部时，自动通过 AJAX 向后端请求更多数据，无需点击“下一页”。
3. 织梦CMS后端：利用织梦的文章模型来存储图片信息，每个“文章”就是一组图片的集合,方便管理和SEO。
4. 响应式设计：页面会根据屏幕宽度自动调整列数,适配不同设备。

第一部分：后端织梦CMS设置

在开始写代码之前,你需要在织梦后台做一些简单的设置。

创建新栏目

1. 登录织梦后台 (/dede/)。
2. 进入「核心」 -> 「栏目管理」 -> 「添加主栏目」。
3. 栏目名称：美女图片
4. 栏目目录：beauties
5. 类型：选择「文章」
6. 列表命名规则：保持默认 {typedir}/{page}.html 即可。
7. 勾选“使用动态页”，这样列表页就是 list.php，方便我们后续用 AJAX 调用。
8. 提交。

添加文章（图片集）

1. 进入「核心」 -> 「文档管理」 -> 「添加新文档」。
2. 选择刚才创建的 美女图片 栏目。
3. 填写一个吸引人的标题，如“气质女神清纯写真集”。
4. 缩略图：上传一张作为该图集封面的小图。
5. ：这是关键！点击“图集”按钮，在弹出的窗口中：
   • 点击“上传新图片”,批量上传你所有的图片。
   • 上传后，可以为每张图片添加说明（可选）。
   • 调整图片顺序。
   • 点击“确定”保存。
6. 提交文档。

重复此步骤,添加多组美女图片。

第二部分：前端源码文件

在你的织梦模板目录 /templets/default/ 下，创建一个新的文件夹，beauties,然后在里面创建以下文件。

文件结构

/templets/default/
├── beauties/
│   ├── index.php (列表页)
│   ├── list_ajax.php (AJAX数据源)
│   ├── images/ (存放图片和JS/CSS)
│   │   ├── style.css (样式文件)
│   │   ├── jquery.min.js (jQuery库)
│   │   ├── jquery.waterfall.js (瀑布流插件)
│   │   └── loading.gif (加载中的动画)

第三部分：代码实现

images/style.css (样式文件)

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}
/* 瀑布流容器 */
#waterfall {
    position: relative;
    width: 100%;
}
/* 瀑布流中的每个项目 */
.item {
    position: absolute;
    width: 230px; /* 固定宽度，高度自适应 */
    margin: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-5px);
}
.item img {
    width: 100%;
    border-radius: 5px 5px 0 0;
    display: block;
}
.item .title {
    padding: 10px;
    font-size: 14px;
    text-align: center;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 加载更多提示 */
#loading {
    text-align: center;
    padding: 20px;
    display: none; /* 默认隐藏 */
}
#loading img {
    width: 30px;
    height: 30px;
}

images/jquery.waterfall.js (瀑布流插件)

这是一个非常轻量且好用的瀑布流插件，你可以从网上搜索下载,或者使用我下面这个简化版的。

/**
 * jQuery Waterfall Plugin
 * 简化版瀑布流插件
 */
(function($) {
    $.fn.waterfall = function(options) {
        var opts = $.extend({}, $.fn.waterfall.defaults, options);
        var $container = this;
        var $items = $container.children();
        var varColumnCount = opts.columnWidth; // 列数
        var varItemIndex = 0;
        var varColumnHeight = []; // 存储每一列高度的数组
        // 初始化列高度数组
        for (var i = 0; i < varColumnCount; i++) {
            varColumnHeight[i] = 0;
        }
        // 遍历每个item
        $items.each(function() {
            var $item = $(this);
            var varItemHeight = $item.outerHeight(); // item的高度
            // 找到当前高度最小的一列
            var varMinHeight = Math.min.apply(null, varColumnHeight);
            var varMinIndex = $.inArray(varMinHeight, varColumnHeight);
            // 设置item的位置
            $item.css({
                'position': 'absolute',
                'top': varMinHeight + 'px',
                'left': varMinIndex * (opts.columnWidth + opts.gutterWidth) + 'px'
            });
            // 更新该列的高度
            varColumnHeight[varMinIndex] += varItemHeight + opts.gutterWidth;
        });
        // 设置容器总高度
        var varMaxHeight = Math.max.apply(null, varColumnHeight);
        $container.css({
            'position': 'relative',
            'height': varMaxHeight + 'px'
        });
    };
    // 默认参数
    $.fn.waterfall.defaults = {
        columnWidth: 4,  // 列数
        gutterWidth: 20  // 间隔
    };
})(jQuery);

list_ajax.php (AJAX数据源)

这个文件是核心,它负责从数据库读取数据并以JSON格式返回给前端。

<?php
require_once(dirname(__FILE__)."/../include/common.inc.php");
// 设置头信息为JSON
header('Content-Type: application/json; charset=utf-8');
// 获取AJAX传过来的页码
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$pagesize = 12; // 每页显示12条数据
// 获取栏目ID，这里假设美女图片栏目的ID是1，请根据你的实际情况修改
$catid = 1; 
// 构建织梦分页查询
// 设置附加SQL，只获取有缩略图的文章
$addfields = 'arc.litpic'; // 需要获取的字段，这里要包含缩略图
$channelid = -1; // 模型ID，-1表示所有模型
// 调用织梦的GetList函数
$dlist = new DataList();
$dlist->pageSize = $pagesize;
$dlist->SetTemplate(''); // 不需要模板
$dlist->SetSource("SELECT arc.id, arc.title, arc.litpic, arc.description 
                   FROM `#@__archives` arc 
                   LEFT JOIN `#@__addonimages` img ON arc.id = aid 
                   WHERE arc.arctypeid = $catid AND arc.arcrank > -1 
                   ORDER BY arc.sortrank DESC");
$dlist->Display();
$dlist->dsql->SetQuery("SELECT COUNT(*) FROM `#@__archives` WHERE arctypeid = $catid AND arcrank > -1");
$dlist->dsql->Execute();
$total = $dlist->dsql->GetArray();
$totalRows = $total['COUNT(*)'];
$dlist->TotalResult = $totalRows;
$dlist->ParseListFields($addfields); // 解析附加字段
// 准备返回数据
$data = array();
if(is_array($dlist->ListFields)){
    foreach($dlist->ListFields as $k=>$arr){
        // 获取图片集的第一张图片作为封面
        $litpic = $arr['litpic'];
        if(empty($litpic)) {
            $litpic = '/templets/default/images/nothumb.jpg'; // 如果没有缩略图，使用默认图
        }
        $data[] = array(
            'id' => $arr['id'],
            'title' => $arr['title'],
            'litpic' => $litpic,
            'url' => GetOneArchive($arr['id'])['arcurl'] // 获取文章链接
        );
    }
}
// 返回JSON数据
echo json_encode($data);
exit;
?>

index.php (前端列表页)

这是用户最终访问的页面，包含了HTML结构、CSS和JS。

<?php
if(!defined('DEDEINC')) exit('Request Error!');
/*
 * 瀑布流美女图片列表页
 * 调用方法：/plus/list.php?tid=1 (你的栏目ID)
 * 本文件为模板文件，直接访问会报错，请通过织梦列表页调用。
 */
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">美女图片 - 瀑布流展示</title>
    <link rel="stylesheet" href="/templets/default/beauties/images/style.css">
</head>
<body>
    <h1 style="text-align: center; margin-bottom: 20px;">美女图片瀑布流</h1>
    <!-- 瀑布流容器 -->
    <div id="waterfall">
        <!-- 初始数据将通过JS加载 -->
    </div>
    <!-- 加载提示 -->
    <div id="loading">
        <img src="/templets/default/beauties/images/loading.gif" alt="加载中...">
    </div>
    <!-- 引入jQuery和瀑布流插件 -->
    <script src="/templets/default/beauties/images/jquery.min.js"></script>
    <script src="/templets/default/beauties/images/jquery.waterfall.js"></script>
    <script>
    $(document).ready(function() {
        var page = 1;
        var isloading = false; // 防止重复加载
        var waterfallContainer = $('#waterfall');
        var loading = $('#loading');
        // 加载数据的函数
        function loadData() {
            if (isloading) return;
            isloading = true;
            loading.show();
            // AJAX请求list_ajax.php
            $.ajax({
                url: '/templets/default/beauties/list_ajax.php',
                type: 'GET',
                data: { page: page },
                dataType: 'json',
                success: function(response) {
                    if (response && response.length > 0) {
                        // 创建HTML片段
                        var html = '';
                        $.each(response, function(i, item) {
                            html += '<div class="item">';
                            html += '<a href="' + item.url + '" target="_blank">';
                            html += '<img src="' + item.litpic + '" alt="' + item.title + '">';
                            html += '</a>';
                            html += '<div class="title">' + item.title + '</div>';
                            html += '</div>';
                        });
                        // 将HTML添加到容器
                        waterfallContainer.append(html);
                        // 重新布局瀑布流
                        waterfallContainer.waterfall({
                            columnWidth: 4, // 4列
                            gutterWidth: 20
                        });
                        page++; // 页码递增
                        isloading = false;
                    } else {
                        // 没有更多数据了
                        loading.html('<p style="color: #999;">没有更多图片了...</p>');
                    }
                },
                error: function() {
                    alert('加载失败，请刷新页面重试！');
                    isloading = false;
                },
                complete: function() {
                    if (response && response.length > 0) {
                        loading.hide();
                    }
                }
            });
        }
        // 初始加载第一页
        loadData();
        // 监听滚动事件，实现无限加载
        $(window).scroll(function() {
            // 当滚动到距离底部100px时，加载下一页
            if ($(document).height() - $(window).height() - $(window).scrollTop() < 100) {
                loadData();
            }
        });
    });
    </script>
</body>
</html>

第四部分：如何使用

1. 上传文件：将上面创建的所有文件和文件夹上传到你的织梦模板目录 /templets/default/ 下。
2. 检查路径：确保所有CSS、JS和图片的路径都是正确的。/templets/default/beauties/images/style.css。
3. 修改配置：
   • 在 list_ajax.php 中，检查 $catid = 1; 这一行，确保 1 是你创建的“美女图片”栏目的ID。
   • 如果你的网站不是根目录安装,请相应修改AJAX请求的URL。
4. 创建菜单：
   • 在织梦后台「频道管理」中，为你的“美女图片”栏目创建一个单页栏目或首页栏目,链接指向这个瀑布流页面。
   • 创建一个单页栏目，页面内容填写：{dede:include filename='templets/default/beauties/index.php'/},然后保存。
5. 访问：通过你创建的菜单链接访问页面,就能看到瀑布流效果了。

注意事项

• 性能：对于大量图片，建议配置织梦的“使用动态页”,并且可以考虑使用CDN来加速图片加载。
• 图片版权：请确保你使用的美女图片拥有合法的版权或授权,避免法律风险。
• SEO：虽然瀑布流对SEO友好度不如传统分页，但每个图集页面本身还是可以被搜索引擎收录的，如果SEO要求极高,可以考虑传统的分页方式。
• 插件选择：jquery.waterfall.js 是一个简单实现，对于更复杂的需求（如图片懒加载、动画效果等），可以考虑使用更成熟的插件，如 masonry 或 isotope。