基于HTML+CSS实现的可交互照片墙Web页面
基于HTML+CSS实现的可交互照片墙Web页面
本文将详细介绍如何使用HTML、CSS和JavaScript实现一个可交互的照片墙Web页面。该照片墙支持点击照片查看大图、添加、删除和替换照片等功能，并且具有良好的过渡效果和响应式设计。
一、实验目的
本次实验的目的是练习HTML+CSS的布局与样式，以及简单的交互功能。
二、实验内容
制作一个可交互的照片墙，照片墙可以点击照片查看大图，并支持添加、删除和替换照片等功能。
三、实验步骤
1. 确定需求
照片墙是一个可以将照片按照一定的顺序排列的Web页面，基本要求是照片要合理地排布在页面上，且照片的尺寸要合适，布局要整齐。点击照片，可以在当前页面上方显示一个新的图层，其中显示这张照片的更大尺寸的图片。点击图层的其他位置可以隐藏该图层。可以向照片墙中添加照片，可以删除照片墙中的照片，可以替换照片墙的照片。页面要具有很好的过渡效果，且满足响应式设计，适应不同尺寸的设备。
2. 设计页面原型
根据需求，设计界面原型。上方居中显示标题和作者，主题部分为网格化布局照片，使用空白作为网格线。在正常计算机浏览器上每行显示4张图片，默认初始有12张图片。在平板电脑（宽度小于1024px大于690px）浏览器上每行显示3张图片。在手机（宽度小于690px）浏览器上每行显示两张图片。且在页面右下位置有一个固定不动的添加图片按钮。底端显示提示信息。大图页面为灰色蒙层，蒙层上为一张图片。在蒙层右下位置有一个删除按钮和一个替换按钮。
3. 实现布局
编写index.html和index.css。
关键技术：
主页面
Outside_block中为页面主题部分，其中title_block为标题，有两个标题标签组成，photo_block是图片，由12张初始组成，bottom_block为底端提示，由两个文字标签组成。其中图片布局采用flex布局，具体样式为：
对于容器整体，采用多余元素换行显示，水平、竖直以及每行行内竖直均为居中。
对于容器内的图片元素，采用百分比宽度20%设置图片宽度，同时确保每行显示4个图片。
加号按钮
在
outside_block外设置一个div作为新增图片的按钮，其中放置一个加号的图片。此外还需要添加一个隐藏的组件，用于触发选择文件。因为div无法单纯通过点击事件调用选择文件的接口，因此将它的点击事件绑定到可以调用选择文件事件的input上。具体样式为：
display:none将input隐藏。position:fixed将元素设为固定布局，固定在页面的某个位置，不随页面的移动而移动。同时设置为为flex容器，使其中的“+”号可以位于按钮的中央。大图图层
Big为图层本身。Big_img用于存放大图，其src为空，动态填入。两个按钮使用
button。Input作用同上。伪类动作
对所有图片、按钮，使用
:hover {cursor: pointer}使的当鼠标悬停时，变为指针。对图片，使用
:hover{transform.scale(1.1)}设置鼠标悬停在图片上方时，图片略微放大以指示该图片。对三个按钮，使用
:hover{transform: translateY(-4px)}设置鼠标悬停在按钮上方时，按钮向上浮动4px的效果。响应式设计
使用了flex布局，实现响应式设计。
同时在中设置viewport视窗，限制移动端的视窗长度。
4. 实现交互
编写index.js，使用jQuery编写。
核心交互功能：
添加图片
将按钮（
.button）的点击事件绑定到隐藏的文件输入上（.button_hidden），并且监听选择文件改变事件change。利用
FileReader，对（id="upload"）选择的文件file，进行读取，并且使用src接收返回的图片base64格式编码（存放在oFRevent.target.result）中。在将或得到的
src插入一个标签中，添加到photo_block最后。查看大图
为所有的图片添加点击事件
show，对于新增的DOM节点，由于JS的渲染特性为在加载时一次性渲染，因此无法绑定上述事件。使用on函数，监听未知img节点的点击事件，并绑定响应函数show。并将触发点击事件的元素id存入全局变量中。传入参数为当前被点击的DOM对象，
show函数为：首先获取被点击图片的
src，并将它赋给大图big_img。再根据当前窗口的大小和图片的尺寸，设置大图的尺寸。若图片是宽大于高，则将宽设置为窗口宽度的scale倍，否则将高设置额为窗口高度为scale被，并等比例缩放。将新的宽度、高度赋予
big_img，并计算边距，赋予内部div（.inner）。设置完成后，使用
fadeIn将大图图层显示出来（".big"）。对大图图层，设置隐藏函数
fadeOut响应点击事件。删除图片
直接使用
remove删除。替换图片
原理同新增图片，拿到
src后替换原有src。
四、实验结果
以下是实验结果的界面效果：