今天晚上吃什么？

讨论分享
1

各位，每天晚上面对的灵魂拷问应该怎么回答？是不是不知道吃点什么？

我家现在是这样点菜滴！

1
11920×1269 238 KB

2
21920×1257 268 KB

3
31920×4373 378 KB

下面是HTML单文件代码（感谢AI）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邵大厨菜谱</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f8f9fa;
            padding: 20px;
            line-height: 1.6;
        }

        /* 页面标题 */
        .gallery-header {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .gallery-header h1 {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .gallery-header p {
            color: #666;
            font-size: 1.1rem;
        }

        /* 瀑布流容器 */
        .masonry-gallery {
            display: grid;
            /* 自动计算列数，最小列宽280px */
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            grid-gap: 20px;
            grid-auto-flow: dense; /* 优化布局密度 */
            max-width: 1400px;
            margin: 0 auto;
        }

        /* 图片卡片样式 */
        .image-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .image-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        /* 图片样式 */
        .image-card img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .image-card:hover img {
            transform: scale(1.02);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .masonry-gallery {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                grid-gap: 15px;
            }

            .gallery-header h1 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .masonry-gallery {
                grid-template-columns: 1fr;
                grid-gap: 10px;
            }

            body {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="gallery-header">
        <h1>邵大厨菜谱</h1>
    </div>

    <div class="masonry-gallery" id="galleryContainer">
        <!-- 图片会通过JS动态加载到这里 -->
    </div>

    <script>
        // 配置：请在这里添加你images目录下的图片文件名
        // 示例：['img1.jpg', 'img2.png', 'img3.webp']
        const imageFiles = [
            // 替换成你自己的图片文件名
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg',
'image6.jpg',
'image7.jpg',
'image8.jpg'
        ];

        // 图片目录路径
        const imageDir = './images/';

        // 获取画廊容器
        const galleryContainer = document.getElementById('galleryContainer');

        // 动态生成图片卡片
        function renderGallery() {
            if (imageFiles.length === 0) {
                galleryContainer.innerHTML = '<div style="text-align:center; color:#666; padding:50px;">暂无图片，请在imageFiles数组中配置图片文件名</div>';
                return;
            }

            imageFiles.forEach((fileName, index) => {
                // 创建图片卡片
                const card = document.createElement('div');
                card.className = 'image-card';

                // 创建图片元素
                const img = document.createElement('img');
                img.src = `${imageDir}${fileName}`;
                img.alt = `图片 ${index + 1}`;

                // 图片加载失败处理
                img.onerror = function() {
                    this.src = 'https://via.placeholder.com/400x600?text=图片加载失败';
                    this.alt = '图片加载失败';
                };

                // 将图片添加到卡片，卡片添加到容器
                card.appendChild(img);
                galleryContainer.appendChild(card);
            });
        }

        // 页面加载完成后渲染画廊
        document.addEventListener('DOMContentLoaded', renderGallery);
    </script>
</body>
</html>

把照片放在html文件所在文件夹下images文件夹中，文件名类似image1.jpg image2.jpg
同步修改html中的文件列表即可。

这下再问吃什么的时候就有目标可查了。

希望各位都把日子过成酒，越久越浓。

1 个赞
2

我认为显示菜名的话会更好一点

3

那我家的菜谱上就会出现一堆“未命名”和“不可名状”……

4

还是得把菜、肉和口味写上。有些内容光看图分不清。

5

怎么会呢，你用什么食材就写用什么食材，再加上处理手法，就是“煎、炒、炆、焗、蒸、炖、炸、凉拌、白焯”

6

难道不是有什么吃什么么？比如我昨天买了云南菌汤火锅底料