资源下载地址：https://download.csdn.net/download/sheziqiong/85723524
资源下载地址：https://download.csdn.net/download/sheziqiong/85723524
一、 实验目的
本次实验目为练习 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
四、实验结果
1.界面效果
- 添加图片后：
- 查看大图
- 平板电脑效果：
- 手机效果
资源下载地址：https://download.csdn.net/download/sheziqiong/85723524
资源下载地址：https://download.csdn.net/download/sheziqiong/85723524
