哄对象o(*￣▽￣*)ブ 照片流 零基础也可以

照片流

大家好

如何用自己学到的一点前端知识 学出一个页面 让对象开心o(￣▽￣)ブ呢

照片流 就可以！！！ 看着两个人的照片 回忆当时的点点滴滴 他/她 一定会开心的

以下就是我们实现的效果图（当然，这照片是我的，你们换成自己的就行~~）

在这个照片流当中，可以实现 以下4个功能：

1. 显示简单的照片流
2. 照片的上传
3. 实时显示时间
4. 控制主题

以上4个功能 可以自己组合~~

功能1

index.html 部分

    <div class="header">
        <h1>自定义</h1>
    </div>
    <!-- 照片主体 -->
    <div class="content">
        <div>
            <img src="./img/1.jpg" alt="">
        </div>
        <div>
            <img src="./img/2.jpg" alt="">
        </div>   

    </div>

 

这部分 需要电脑内（本地照片）的照片支撑起照片流的大框架 照片会在index.js 中 进行处理 形成照片流的效果

index.css部分

        body {
            margin: 0;
            padding: 0;
			/* 设置整个页面背景色为黑色 */
            background-color: black;
        }
        .header h1 {
            color: pink;
            text-align: center;
            margin: 70px 350px;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            position: relative;
            /* 列数  照片可随着页面的大小变动大小*/
            column-count: 4;
            /* 间隙 */
            column-gap: 20px;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .container img {
            display: pink;
            width: 100%;
            /* 将图片的四个角设置为圆润 */
            border-radius: 5px;
            /* 添加 CSS 过渡效果 */
            transition: transform 0.3s ease;
        }
        .container img:hover,
        .container img:focus {
            /* 鼠标悬停或聚焦时放大图片 */
            transform: scale(1.1);
        }

index.js

      // 瀑布流主体
        class Waterfall {
            constructor(containerSelector, urls) {
                this.container = document.querySelector(containerSelector);
                this.urls = urls;
            }

            init() {
                this.urls.forEach(url => {
                    this.createImage(url);
                });
            }

            createImage(url) {
                const img = document.createElement('img');
                img.src = url;
                img.style.opacity = '0'; // 初始设置透明度为 0
                img.onload = () => {
                    img.style.opacity = '1'; // 图片加载完成后逐渐过渡到完全显示
                };
                img.addEventListener('click', () => {
                    img.style.transform = 'scale(1.1)'; // 点击图片时放大图片
                });
                this.container.appendChild(img);
            }
        }

实现这部分 可以展示一个简单照片流，功能1就完成了~~

效果：

功能2

照片的上传，将照片的上传功能与照片里一起显示，扩大了鼠标传入照片时的面积

index.html 部分

 <div class="upload-dragger ">
            <svg t="1715689094680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="4456" width="128" height="128">
                <path
                    d="M511.741935 420.645162 511.7419…………0.387098 766.451616Z"
                    fill="#666666" p-id="4457"></path>
            </svg>
            <span class="upload-text">点击上传</span>
            <span class="upload-text">或将文件拖到此处</span>
            <input type="file" id="upload-input" style="visibility: hidden;" multiple accept="image/*">
  </div>

d=“M511.741935 420.645162 511.7419…………0.387098 766.451616Z” 这部分是省略的 （源码太长）

大的盒子div 里面弄嵌套了 几个小盒子

index.css部分

.upload-dragger {
            width: 285px;
            height: 190px;
            display: flex;
            justify-self: center;
            align-items: center;
            flex-direction: column;
            border: 4px dashed paleturquoise;
            border-radius: 12px;
            box-sizing: border-box;
            cursor: pointer;
        }

        .icon path {
            fill: paleturquoise
        }
        .upload-text {
            color: paleturquoise;
            font-size: 14px;
            /* 文字无法选中 */
            user-select: none;
        }
        .upload-dragger:hover {
            border: 4px dashed palegreen;
        }

        /* 拖拽式的样式 */
        .upload-dragger.drag {
            border: 4px dashed palegreen;
        }

        .upload-dragger.drag .icon path {
            fill: palegreen;
        }

        .upload-dragger.drag .upload-text {
            color: palegreen;
        }

        /* 拖拽元素时 禁止 指针事件 子元素会继承父元素 的拖拽响应*/
        .upload-dragger.drag * {
            pointer-events: none;
        }

index.js

   var container = document.getElementsByClassName('container')[0]
        //被隐藏的文件按钮
        var uploadInput = document.getElementById('upload-input')
        //上传图片（框）
        var uploadDragger = document.getElementsByClassName('upload-dragger')[0]

        //上传图片时经过框时  点击触发"文件选择器""
        uploadDragger.addEventListener('click', function (e) {
            uploadInput.click()
        })
        //选中文件时
        uploadInput.addEventListener('change', function (e) {
            console.log(e.target.files)
            uploadPicture(e.target.files)
        })
        //在 uploadDragger 内部有拖拽行为
        uploadDragger.addEventListener('dragover', function (e) {
            e.preventDefault()
            // console.log('over');
        })
        //拖拽进入uploadDragger时
        uploadDragger.addEventListener('dragenter', function (e) {
            uploadDragger.classList.add('drag')
        })
        //拖拽离开uploadDragger时
        uploadDragger.addEventListener('dragleave', function (e) {
            uploadDragger.classList.remove('drag')
        })
        //拖拽松开时
        uploadDragger.addEventListener('drop', function (e) {
            e.preventDefault()
            console.log(e.dataTransfer.files)
            uploadDragger.classList.remove('drag')
            //图片显示
            uploadPicture(e.dataTransfer.files)
        })

        function uploadPicture(files) {
            for (let i = 0; i < files.length; i++) {
                if (!/\.(png|jpg|jpeg|gif|PNG|JPG|JPEG|GIF)$/.test(files[i].name)) {
                    alert('文件' + files[i].name + '上传的只能是照片格式哦(づ￣ 3￣)づ')
                    continue
                }
                var urls = document.createElement('img')
                urls.src = window.URL.createObjectURL(files[i])
                urls.className = 'container'
                container.insertBefore(urls, uploadDragger.nextSibling)
            }
        }

实现照片上传时 会触及一些行为如：上传图片时经过框时，在 uploadDragger 内部有拖拽行为，拖拽进入uploadDragger时等等这些在上面的代码展示中都有标注出来~~

写了uploadPicture函数上传我们的照片，在上传照片前 先判断一下 照片的格式是否正确

效果：

做到这里就差不多了，下面两个功能可以当作扩展 主要是在照片流当中会显得有点突兀~~

功能3

index.html 中 显示时间只放了一个div盒子 （占位）

index.css

        .digitalClock {
            float: right;
            margin-left: 20px;
            padding-top: 3px;
            font: 400 15px 'Microsoft Yahei';
            height: 24px;
            border: 2px dashed palegreen ;
        }

index.js

 var clock = document.querySelector(".digitalClock");
        var now, second, minute, hour, date, mouth, year;
        function showTime() {
            now = new Date();
            second = (now.getSeconds()).toString().padStart(2, '0');
            minute = (now.getMinutes()).toString().padStart(2, '0');
            hour = (now.getHours()).toString().padStart(2, '0');
            date = (now.getDate().toString().padStart(2, '0'));
            mouth = (now.getMonth() + 1).toString().padStart(2, '0');
            year = now.getFullYear();
            clock.innerHTML =  year + '/' + mouth + '/' + date + '--' + hour + ':' + minute + ':' + second
        }
        setInterval(showTime, 1000)

效果：

功能4

index.html

 <!-- 主题控制 -->
            <button id="toggleTheme">
                <div aria-hidden="true"
                class="relative flex-shrink-0 overflow-hidden outline-none group-data-[focus-visible=true]:z-10 group-data-[focus-visible=true]:ring-2 group-data-[focus-visible=true]:ring-focus group-data-[focus-visible=true]:ring-offset-2 group-data-[focus-visible=true]:ring-offset-background group-data-[selected=true]:text-primary-foreground transition-background w-auto h-auto bg-transparent rounded-lg flex items-center justify-center group-data-[selected=true]:bg-transparent !text-default-500 pt-px px-0 mx-0">
                <svg aria-hidden="true" focusable="false" height="22" role="presentation" viewBox="0 0 24 24"
                    width="22">
                    <path
                        d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
                        fill="currentColor"></path>
                </svg>
            </div>
            </button>   

index.css

        #toggleTheme {
            background-color:palegoldenrod;
            border: none;
        }

index.js

        const toggleThemeButton = document.getElementById('toggleTheme');
        let isDarkTheme = false;

        toggleThemeButton.addEventListener('click', () => {
            if (isDarkTheme) {
                document.body.style.backgroundColor = '#fff';
                document.body.style.color = '#000';
            } else {
                document.body.style.backgroundColor = '#000';
                document.body.style.color = '#fff';
            }
            isDarkTheme = !isDarkTheme;
        });

添加事件

以上的代码嵌套 代价可能会一点晕(((φ(◎ロ◎;)φ)))，源码在这里–>zhaopPianliu: 友友们，照片流的源码在这里 (gitee.com)