thinkphp瀑布流

在ThinkPHP框架中实现瀑布流布局，通常涉及前端和后端的协同工作。以下是基于ThinkPHP实现瀑布流布局的基本步骤和代码示例。

瀑布流布局的基本原理

瀑布流布局的核心在于，通过动态加载数据并调整元素位置，使得页面上的内容像瀑布一样从下往上流动。这种布局特别适合图片或内容较多的网页，能够有效提升用户体验。

实现步骤

前端实现：使用jQuery插件（如Masonry）来实现元素的动态调整。
后端实现：在ThinkPHP中，通过控制器处理分页请求，并返回数据给前端。

代码示例

前端（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流布局示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
    <style>
        .item {
            width: 200px;
            margin: 10px;
            background-color: #eee;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        $(document).ready(function(){
            var $container = $('#container');
            // 初始化Masonry
            $container.masonry({
                itemSelector: '.item',
                columnWidth: 200,
                gutter: 10
            });
            // 加载数据
            function loadData() {
                $.ajax({
                    url: '/index/index/getmore',
                    type: 'GET',
                    success: function(data) {
                        var $newItems = data.map(function(item) {
                            return $('<div class="item"><img src="' + item.image + '" /><h3>' + item.title + '</h3></div>');
                        }).appendTo($container);
                        $container.masonry('appended', $newItems, true);
                    }
                });
            }
            // 页面初始化加载数据
            loadData();
            // 监听滚动事件，加载更多数据
            $(window).scroll(function() {
                if($(window).scrollTop() + $(window).height() == $(document).height()) {
                    loadData();
                }
            });
        });
    </script>
</body>
</html>

后端（ThinkPHP）

<?php
namespace app\index\controller;
use think\Controller;
use app\index\model\Item as ItemModel;

class Index extends Controller
{
    public function index()
    {
        $list = ItemModel::all(); // 获取所有数据
        $this->assign('list', $list);
        return $this->fetch();
    }

    public function getMore()
    {
        $page = input('post.page', 1); // 获取页码
        $list = ItemModel::where('id', '>', input('post.last_id'))->order('id', 'asc')->limit(10)->select(); // 获取更多数据
        $this->ajaxReturn($list);
    }
}