js实现时间轴自动排列效果

下面我将详细讲解如何使用JavaScript实现时间轴自动排列效果。

概述

时间轴是一种将时间点或事件与轴上的点或线连接起来的可视化工具，被广泛应用于各个网站的设计中。自动排列效果指的是时间轴上的点或线可以自动按照时间顺序排列显示。下面我们将分步骤详细介绍如何使用JavaScript实现这个效果。

步骤

1. 准备数据

首先需要准备一个包含时间信息的数据，通常由一个数组或JSON对象表示。例如，一个表示个人经历的时间轴可以定义为：

const data = [
  { year: 2000, event: '出生' }, 
  { year: 2010, event: '上小学' },
  { year: 2015, event: '上初中' },
  { year: 2018, event: '上高中' },
  { year: 2022, event: '毕业' },
];

2. 创建时间轴容器

创建一个容器用来承载时间轴，可以使用HTML和CSS实现。

<div id="timeline"></div>

#timeline {
  width: 600px;
  margin: 20px auto;
  position: relative;
}

3. 在容器中添加时间节点

根据数据中的时间信息，利用JavaScript动态创建时间节点和连接线。节点可以由一个div元素表示，连接线可以由一个伪元素before或after实现（具体实现方法因项目而异）。

function createTimelineNodes(data) {
  const timeline = document.querySelector('#timeline');
  for (let i = 0; i < data.length; i++) {
    const node = document.createElement('div');
    const year = document.createElement('p');
    const event = document.createElement('p');

    node.classList.add('timeline-node');
    year.classList.add('year');
    event.classList.add('event');

    year.innerHTML = data[i].year;
    event.innerHTML = data[i].event;

    node.appendChild(year);
    node.appendChild(event);
    timeline.appendChild(node);
  }
}

.timeline-node {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  border: 3px solid #cccccc;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-node:before {
  content: '';
  position: absolute;
  left: calc(50% - 1.5px);
  top: -20px;
  width: 3px;
  height: 20px;
  background-color: #cccccc;
}

4. 排列时间节点

节点创建完后，需要利用JavaScript将其按照时间从早到晚排序。这里利用数组的sort方法，根据year来排序。

function sortTimelineNodes() {
  const timelineNodes = document.querySelectorAll('.timeline-node');
  const timelineArray = Array.prototype.slice.call(timelineNodes);
  timelineArray.sort(function(a, b) {
    const aYear = a.querySelector('.year').innerHTML;
    const bYear = b.querySelector('.year').innerHTML;
    return aYear - bYear;
  });
  for (let i = 0; i < timelineArray.length; i++) {
    timelineArray[i].style.top = i * 100 + 'px';
  }
}

5. 调用函数

最后，将上述函数调用放在一起，即可实现时间轴自动排列效果。

createTimelineNodes(data);
sortTimelineNodes();

示例

下面是一个含有图片的时间轴示例：

const data = [
  { year: 2000, event: '出生', img: 'https://via.placeholder.com/150x150' }, 
  { year: 2010, event: '上小学', img: 'https://via.placeholder.com/150x150' },
  { year: 2015, event: '上初中', img: 'https://via.placeholder.com/150x150' },
  { year: 2018, event: '上高中', img: 'https://via.placeholder.com/150x150' },
  { year: 2022, event: '毕业', img: 'https://via.placeholder.com/150x150' },
];

function createTimelineNodes(data) {
  const timeline = document.querySelector('#timeline');
  for (let i = 0; i < data.length; i++) {
    const node = document.createElement('div');
    const year = document.createElement('p');
    const event = document.createElement('p');
    const img = document.createElement('img');

    node.classList.add('timeline-node');
    year.classList.add('year');
    event.classList.add('event');
    img.classList.add('img');

    year.innerHTML = data[i].year;
    event.innerHTML = data[i].event;
    img.src = data[i].img;

    node.appendChild(year);
    node.appendChild(event);
    node.appendChild(img);
    timeline.appendChild(node);
  }
}

function sortTimelineNodes() {
  const timelineNodes = document.querySelectorAll('.timeline-node');
  const timelineArray = Array.prototype.slice.call(timelineNodes);
  timelineArray.sort(function(a, b) {
    const aYear = a.querySelector('.year').innerHTML;
    const bYear = b.querySelector('.year').innerHTML;
    return aYear - bYear;
  });
  for (let i = 0; i < timelineArray.length; i++) {
    timelineArray[i].style.top = i * 200 + 'px';
  }
}

createTimelineNodes(data);
sortTimelineNodes();

通过以上代码可以实现一个时间轴节点中包含图片的效果。