本案例思路：
大的照片墙上6 X 4陈列着24张照片，通过计算，算出每个照片摆放的位置，具体的照片墙详见如下：
需要计算出的地方有：
- 行间距和列间距：row_span = ($("#app").height() - 500) / 3 column_span = ($("#app").width() - 750) / 5
- 计算每个图片对应的行坐标和列坐标（计算出在6X4排列中的位置）：row_index = i / 6 column_index = i % 6
- 计算时一个行距离为：（row_span + 每个照片高度）
- 计算时一个列距离为：（column_span + 每个照片宽度）
使用到：
- 虚拟DOM：语法：$("html语句")，例如：$("<div></div>")
- 虚拟DOM不是实际存在的DOM，为了操作时使用到它，需要将其转换成实际的DOM对象，需要使用appendTo(实体DOM)函数将其加入到实体DOM中
- 元素的高度获取：$("#app").height()
- 元素的宽度获取：$("#app").width()
- 使用CSS()函数设置样式时，若出现特殊符号需要加引号，如 background-size中出现了 '-'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 90%;
height: 90vh;
border: 2px solid #000000;
position: absolute;
top: 5%;
left: 5%;
}
#app>div{
height: 125px;
width: 125px;
background: #00FFF0;
border: 2px solid #FF0000;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
$(function(){
for(let i = 0; i < 24; i++){
//将每个小图设置为绝对定位，计算出每个小图距左和距顶的距离
const x = parseInt(i / 6)
const y = i % 6
//计算行间距和列间距
const row_span = ($("#app").height() -500) / 3
const column_span = ($("#app").width() - 750) / 5
//计算每个小图的实际位置
const top = x * (125 + row_span)
const left = y * (125 + column_span)
$("<div></div>").css({
top: top + 'px',
left: left + 'px',
background: 'url(img/' + (i + 1) +'.jpg)',
'background-size': '125px 125px'
}).appendTo($("#app"))
}
})
</script>
</body>
</html>
在以上基础上，添加图片点击，拆分照片最后合成一张图功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 90%;
height: 90vh;
border: 2px solid #000000;
position: absolute;
top: 5%;
left: 5%;
}
#app>div{
height: 125px;
width: 125px;
background: #00FFF0;
position: absolute;
border-radius: 10px;
transition: 2s;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
$(function(){
for(let i = 0; i < 24; i++){
//将每个小图设置为绝对定位，计算出每个小图距左和距顶的距离
const y = parseInt(i / 6)
const x = i % 6
//计算行间距和列间距
const row_span = ($("#app").height() - 500) / 3
const column_span = ($("#app").width() - 750) / 5
//计算每个小图的实际位置
const top = y * (125 + row_span)
const left = x * (125 + column_span)
const r = Math.random() * 30 - 15
$("<div></div>").css({
top: top + 'px',
left: left + 'px',
background: 'url(img/' + (i + 1) +'.jpg)',
'background-size': '125px 125px',
transform: 'scale(0.8) rotate(' + r + 'deg)',
'box-shadow': '1px 1px 20px #f81aff'
}).appendTo($("#app"))
//实现点击照片墙中任意一张照片，将照片分成24份分别放到24个小图中，最后合成一张大图
$("#app>div").click(function(){
let index = $(this).index()
/*计算间距
合成一张图时，就只剩下一个边框，所以上下各一个边框，左右各一个边框
*/
top_span = ($("#app").height() - 500) / 2
left_span = ($("#app").width() - 750) / 2
//给24个小图分别放上一张图的不同部分
for(let i = 0 ; i < $("#app>div").length; i++){
const top_index = parseInt(i/6)
const left_index = i % 6
$("#app>div").eq(i).css({
background: 'url(img/' + (index+1) + '.jpg)',
'box-shadow': '0px 0px 0px 0',
transform: 'scale(1) rotate(0deg)',
'border-radius': '0px',
'background-position': (-125*left_index) + 'px ' + (-125*top_index) + 'px',
top: (top_span + 125*top_index) + 'px',
left: (left_span + 125*left_index) + 'px'
})
}
})
}
})
</script>
</body>
</html>