效果图
解题思路
将图片全部定位至中心点，然后x轴就变动translateX ，y轴同理；
这里有两个问题
浏览器： 以左上角为原点0，0 越往下y越大
数学坐标系：以中心点为原点0，0 越往下y越小；
曲线函数：坐标确定了原点确定了，就需要对应的曲线函数来描述这条线段
我们一个个来解决
一、如何把数学坐标系运用到浏览器之中，转化y轴的上下大小反序；
translateX 变化多少就是多少，translateY 变化多少就是反向移动多少，所以重要的是这个反向我们如何来描述,其实这里也很简单，我们使用css变量，然后在变化的时候，setProperty对应的变量值，然后在css里我们做对应的描述；
<style>
#container {
width: 100vw;
height: 100vh;
background-color: aqua;
position: relative;
overflow: auto;
}
.curveImg {
--size: 30px;
--dx: 1;
--dy: 1;
border-radius: calc(var(--size) / 2);
width: var(--size);
height: var(--size);
position: absolute;
left: 50%;
top: 50%;
margin-left: calc(var(--size) / 2);
margin-top: calc(var(--size) / 2);
object-fit: cover; /* 保持图片纵横比 */
transition: all 0.8s ease-out ;
transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * -1px));
}
</style>
<body>
<div id="container"></div>
</body>
此时我们已经完成了准备工作，接着完成反向排序的准备工作，dy越大则在html中排列就越小，超越原点即为负数；
二、将原点挪至中心点
原点在与你想让它在那个位置，它都可以排列到那个位置，这里我想让它在容器内渲染，所以我想设置在容器内的中心位置，那么这个中心位置，其实就是我给定的最大值与最小值和的一半就是我的中心点；
那么我只要让其对应的横坐标点，减去当前的原点，就是它当前需要移动的距离，也就是dx，y同理；
曲线函数
不管是曲线，还是抛物线，还是斜线，其实都是有一个方程式，或者叫做函数来表示；
那么如果是在数学中；
y=x; 那就表示一段45度的斜线；
y=-x ; 那就表示一段-45度的斜线；
y=sin(x); 那就表示连绵的曲线；
数学坐标系中是无限延伸的，但在我们的浏览器中，他是有一个范围呢；所以我们还需要给他一个范围
如果是在代码中，如果我们得到了曲线的表示函数，接下来就是将其用html、css、js来绘制到我们的电脑屏幕中；
我们先来写一个类来表示这个计算类
class Curve {
/**
* 创建一个计算类的实例 *
* @constructor
* @param {Function} curveFunc 要添加的任务实例
* @param {Array} xRange x取值范围
* @param {Array} yRange y取值范围
*/
constructor(curveFunc, xRange, yRange) {
this.xRange = xRange
this.yRange = yRange
this.curveFunc = curveFunc
}
/**
* 计算曲线函数
* @param {Number} x x值
* @returns {Number} y y值
*/
getY(x) {
let y = this.curveFunc(x)
if (y < this.yRange[0]) {
y = this.yRange[0]
}
if (y > this.yRange[1]) {
y = this.yRange[1]
}
return y
}
}
上面我们已经创建好一个计算类、具体释义有jsdoc注释；
那么我们如何来表示曲线或者直线呢
const line = new Curve(x=>x,[-1,1],[-1,1])
const wave = new Curve(
x => Math.sin(x),
[-1 * Math.PI, 3 * Math.PI],
[-1, 1]
)
这样就表示出来了；
曲线：y = wave.getY(x);
直线：y = line.getY(x);
那么关于坐标关系我们已经用代码描述出来绘制就是最简单的事了；
<div id="container"></div>
假设我们现在有这么一个div；
然后我们先在div里创建一些图片（当然这里也可以换成你喜欢的样式）；
const box = document.querySelector("#container")
const initImg = className => {
const frag = document.createDocumentFragment()
for (let i = 0; i < 100; i++) {
const img = document.createElement("img")
img.classList.add(className)
img.src = "./test.jpg" // 设置图片路径
frag.appendChild(img)
}
box.appendChild(frag)
}
initImg("curveImg")
接下来就是渲染
const layout = (curve, doms, width, height) => {
const [minX, maxX] = curve.xRange
const [minY, maxY] = curve.yRange
// 步长
const xStep = (maxX - minX) / (doms.length - 1)
// 与实际坐标轴的比例
const xScale = width / (maxX - minX)
const yScale = height / (maxY - minY)
const cx = (maxX + minX) / 2
const cy = (maxY + minY) / 2
for (let i = 0; i < doms.length; i++) {
const dom = doms[i]
const x = minX + i * xStep
const y = curve.getY(x)
const dx = (x - cx) * xScale
const dy = (y - cy) * yScale
dom.style.setProperty("--dx", dx)
dom.style.setProperty("--dy", dy)
}
}
接下来只要我们执行layout函数，那么图片就会进行对应的渲染；
上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#container {
width: 100vw;
height: 100vh;
background-color: aqua;
position: relative;
overflow: auto;
}
.curveImg {
--size: 30px;
--dx: 1;
--dy: 1;
border-radius: calc(var(--size) / 2);
width: var(--size);
height: var(--size);
position: absolute;
left: 50%;
top: 50%;
margin-left: calc(var(--size) / 2);
margin-top: calc(var(--size) / 2);
object-fit: cover; /* 保持图片纵横比 */
transition: all 0.8s ease-out ;
transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * -1px));
}
</style>
</head>
<body>
<div>
<button onclick="renderLine()">直线</button>
<button onclick="renderWave()">曲线</button>
<button onclick="renderLineX()">x线</button>
<button onclick="renderWaveX()">交叉曲线线</button>
</div>
<div id="container"></div>
<script>
class Curve {
/**
* 创建一个计算类的实例 *
* @constructor
* @param {Function} curveFunc 要添加的任务实例
* @param {Array} xRange x取值范围
* @param {Array} yRange y取值范围
*/
constructor(curveFunc, xRange, yRange) {
this.xRange = xRange
this.yRange = yRange
this.curveFunc = curveFunc
}
/**
* 计算曲线函数
* @param {Number} x x值
* @returns {Number} y y值
*/
getY(x) {
let y = this.curveFunc(x)
if (y < this.yRange[0]) {
y = this.yRange[0]
}
if (y > this.yRange[1]) {
y = this.yRange[1]
}
return y
}
}
const layout = (curve, doms, width, height) => {
const [minX, maxX] = curve.xRange
const [minY, maxY] = curve.yRange
const xStep = (maxX - minX) / (doms.length - 1)
const xScale = width / (maxX - minX)
const yScale = height / (maxY - minY)
const cx = (maxX + minX) / 2
const cy = (maxY + minY) / 2
for (let i = 0; i < doms.length; i++) {
const dom = doms[i]
const x = minX + i * xStep
const y = curve.getY(x)
const dx = (x - cx) * xScale
const dy = (y - cy) * yScale
dom.style.setProperty("--dx", dx)
dom.style.setProperty("--dy", dy)
}
}
const box = document.querySelector("#container")
const initImg = className => {
const frag = document.createDocumentFragment()
for (let i = 0; i < 100; i++) {
const img = document.createElement("img")
img.classList.add(className)
img.src = "./test.jpg" // 设置图片路径
frag.appendChild(img)
}
box.appendChild(frag)
}
initImg("curveImg")
const images = document.querySelectorAll(".curveImg")
const wave = new Curve(
x => Math.sin(x),
[-1 * Math.PI, 3 * Math.PI],
[-1, 1]
)
const wave2 = new Curve(
x => Math.sin(x),
[0 * Math.PI, 4 * Math.PI],
[-1, 1]
)
const line = new Curve(x => x, [-1, 1], [-1, 1])
const line2 = new Curve(x => -x, [-1, 1], [-1, 1])
const middleIndex = Math.floor(images.length / 2)
const dom1 = Array.from(images).slice(0,middleIndex);
const dom2 = Array.from(images).slice(middleIndex);
function renderLine() {
layout(line, images, box.clientWidth - 200, box.clientHeight - 200)
}
function renderWave() {
layout(wave, images, box.clientWidth - 200, box.clientHeight - 200)
}
function renderLineX() {
layout(line, dom1, box.clientWidth - 200, box.clientHeight - 200)
layout(line2, dom2, box.clientWidth - 200, box.clientHeight - 200)
}
function renderWaveX() {
layout(wave, dom1, box.clientWidth - 200, box.clientHeight - 200)
layout(wave2, dom2, box.clientWidth - 200, box.clientHeight - 200)
}
document.addEventListener("DOMContentLoaded", () => {
renderLine()
})
</script>
</body>
</html>
