Python Flask小项目：如何实现漫画阅读网站的响应式瀑布流与实时过滤搜索？

h691938207 1楼

挺喜欢这个风格的

Flask漫画网站：瀑布流布局 + 实时搜索的实现方案

核心思路：前端用Masonry.js做瀑布流，通过AJAX与Flask后端交互，搜索用JavaScript监听输入并过滤数据。

1. 后端Flask应用 (app.py)

from flask import Flask, render_template, jsonify, request
import json

app = Flask(__name__)

# 模拟漫画数据
COMICS = [
    {"id": 1, "title": "海贼王", "category": "冒险", "cover": "cover1.jpg"},
    {"id": 2, "title": "火影忍者", "category": "热血", "cover": "cover2.jpg"},
    {"id": 3, "title": "进击的巨人", "category": "奇幻", "cover": "cover3.jpg"},
    # ...更多数据
]

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/comics')
def get_comics():
    # 获取搜索参数
    search = request.args.get('search', '').lower()
    category = request.args.get('category', '')
    
    # 过滤数据
    filtered = COMICS
    if search:
        filtered = [c for c in filtered if search in c['title'].lower()]
    if category:
        filtered = [c for c in filtered if c['category'] == category]
    
    return jsonify(filtered)

if __name__ == '__main__':
    app.run(debug=True)

2. 前端HTML模板 (templates/index.html)

<!DOCTYPE html>
<html>
<head>
    <title>漫画阅读站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <style>
        .grid { margin: 20px auto; max-width: 1200px; }
        .grid-item { width: 300px; margin: 10px; border: 1px solid #ddd; padding: 10px; }
        .grid-item img { width: 100%; height: auto; }
        .controls { text-align: center; margin: 20px; }
        input, select { padding: 8px; margin: 5px; }
        @media (max-width: 768px) {
            .grid-item { width: calc(50% - 20px); }
        }
        @media (max-width: 480px) {
            .grid-item { width: calc(100% - 20px); }
        }
    </style>
</head>
<body>
    <div class="controls">
        <input type="text" id="search" placeholder="搜索漫画...">
        <select id="category">
            <option value="">全部分类</option>
            <option value="冒险">冒险</option>
            <option value="热血">热血</option>
            <option value="奇幻">奇幻</option>
        </select>
    </div>
    
    <div class="grid" id="comic-grid">
        <!-- 漫画卡片通过JS动态加载 -->
    </div>

    <script>
        let grid;
        
        // 初始化瀑布流
        function initMasonry() {
            grid = new Masonry('#comic-grid', {
                itemSelector: '.grid-item',
                columnWidth: 300,
                gutter: 20,
                fitWidth: true
            });
        }
        
        // 加载漫画数据
        async function loadComics() {
            const search = document.getElementById('search').value;
            const category = document.getElementById('category').value;
            
            const params = new URLSearchParams();
            if (search) params.append('search', search);
            if (category) params.append('category', category);
            
            const response = await fetch(`/api/comics?${params}`);
            const comics = await response.json();
            
            renderComics(comics);
        }
        
        // 渲染漫画卡片
        function renderComics(comics) {
            const gridEl = document.getElementById('comic-grid');
            gridEl.innerHTML = '';
            
            comics.forEach(comic => {
                const item = document.createElement('div');
                item.className = 'grid-item';
                item.innerHTML = `
                    <img src="/static/${comic.cover}" alt="${comic.title}">
                    <h3>${comic.title}</h3>
                    <span class="category">${comic.category}</span>
                `;
                gridEl.appendChild(item);
            });
            
            // 等图片加载完重新布局
            imagesLoaded(gridEl, () => {
                if (grid) grid.destroy();
                initMasonry();
            });
        }
        
        // 实时搜索（防抖处理）
        let searchTimeout;
        function debouncedSearch() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(loadComics, 300);
        }
        
        // 事件监听
        document.getElementById('search').addEventListener('input', debouncedSearch);
        document.getElementById('category').addEventListener('change', loadComics);
        
        // 初始加载
        loadComics();
    </script>
</body>
</html>

实现要点：