从数据库中，我拉出一种具有特定起点和特定终点的Div时间轴。其中一些重叠，其中一些可以彼此相邻安装。
最终，我想将它们滑动在一起，以便它尽可能紧凑，如下所示：
我怀疑如何应对这个挑战：通过服务器端（php）脚本或使用一些javascript浮动脚本。或者偏离一个完全不同的方法
有人能把我推向正确的方向吗？
编辑：：重要的是，因为它是一个时间轴，div的水平位置保持不变。因此，将所有 div 浮动到左侧或内联阻止它们不是选项:)
我的数据库设置：
id | name | start | end
1 | a | 2 | 7
2 | b | 5 | 10
etc
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/udofoq/26/edit
-->
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">div.blue {
background-color: #a4dcdf;
}
div.orange {
background-color: #fd9226;
}
div.green {
background-color: #88b37e;
}
div.yellow {
background-color: #d8d03f;
}
div.red {
background-color: #c16558;
}
div.grey {
background-color: #cdcdcd;
}
div.hours1{
top: 0px;
left: 10px;
width: 100px;//(110-10)
}
div.hours2{
top: 30px;
left: 80px;
width: 50px;
}
div.hours3{
top: 60px;
left: 120px;
width: 50px;
}
div.hours4{
top: 90px;
left: 5px;
width: 70px;
}
div.hours5{
top: 120px;
left: 110px;
width: 30px;
}
div.hours6{
top: 150px;
left: 130px;
width: 70px;
}
div.hours {
position: absolute;
height:20px;
color: white;
text-align:center;
border:white;
-webkit-box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
font: bold 18px Arial, Helvetica, Geneva, sans-serif;
line-height:20px;
}
button{
position:static;
margin-top:200px;
}
.collapse,
.overlap1,
.overlap2,
.overlap3,
reset{
float:left;
}
</style></head>
<body>
<div class="hours hours1 orange">A</div>
<div class="hours hours2 yellow">B</div>
<div class="hours hours3 blue">C</div>
<div class="hours hours4 green">D</div>
<div class="hours hours5 red">E</div>
<div class="hours hours6 grey">F</div>
<button class="collapse">collapse</button>
<button class="overlap1">sort</button>
<button class="reset">reset</button>
<script>
data1 = [
[1, 10, 110],
[2, 80, 130],
[3, 120, 170],
[4, 5, 70],
[5, 110, 140],
[6, 130, 180]
];
//just added for console output not needed
var divider="";
for (var i = 0; i < 80; i++) {
divider += "_";
}
console.log(divider);
console.log("ORIGINAL ARRAY DATA1:", data1);
//add a column to keep track of the row, to start set it to row 1
data1 = $.each(data1, function(index, value) {
value[3] = 0;
});
console.log(divider);
console.log("ORIGINAL dataA WITH ADDED COLUMN:", data1);
function timelinesort(dataA){
//make a new Array to store the elements in with their new row number
var dataB = dataA.slice(0, 1);
console.log(divider);
console.log("INITIALIZED dataB WITH FIRST ELEMENT FROM dataA:", dataB);
//initialize the counter
var counter = 0;
console.log(divider);
console.log("INITIALIZED ROUNDS COUNTER:", counter);
dataA = $.map(dataA, function(value1, index1) {
//increment counter with 1
counter++;
console.log(divider);
console.log("INCREMENTED ROUNDS COUNTER:", counter);
dataA = $.map(dataA, function(value2, index2) {
//exclude comparing an element with itself
if(value2 != dataB[0]) {
//check to see if elements overlap
if(value2[2] >= dataB[0][1] && value2[1] <= dataB[0][2]) {
console.log(divider);
console.log("Round " + counter + " from dataA: [" + value2 + "] overlaps with " + dataB[0] + " incrementing row counter with 1");
//increment the value in column 3 (row counter) of the array
value2[3]++;
console.log(divider);
console.log("Now the dataA has changed to this:", dataA);
console.log("Meanwhile data1 has changed to this:", data1);
} else {
//if no overlap occurs check if the element is not already in the dataB array and if not check if it doesn't overlap with the existing elements
if($.inArray(value2, dataB) == -1) {
$.each(dataB, function(index3, value3) {
if(value3[2] >= value2[1] && value3[1] <= value2[2]) {
console.log(divider);
console.log("Round " + counter + " from dataA: [" + value2 + "] overlaps with " + value3 + " incrementing row counter with 1");
dataB.pop();
//increment the value in column 3 (row counter) of the array
value2[3]++;
} else {
//if no overlap occurs add the value to dataB
dataB.push(value2);
console.log(divider);
console.log("Added [" + value2 + "] to dataB and now dataB has changed to this: ", dataB);
}
});
} else {
dataB.push(value2);
console.log("Added [" + value2 + "] to dataB and now dataB has changed to this: ", dataB);
}
}
}
return [value2];
});
dataA = jQuery.grep(dataA, function(item) {
return jQuery.inArray(item, dataB) < 0;
});
if(dataA.length >= 1) {
dataB.unshift(dataA[0]);
dataB = dataB.splice(0, 1);
} else {
dataA = [];
}
});
}
//run the function
timelinesort(data1);
console.log(divider);
console.log("Finally the data1 has changed to this:", data1);
$(".collapse").click(function() {
$.each(data1, function(index, value) {
$("div.hours" + (index + 1)).animate({
"top": 0
}, "slow");
});
});
$(".overlap1").click(function() {
$.each(data1, function(index, value) {
console.log("div.hours" + (index + 1) + ":" + (value[3]) * 26);
$("div.hours" + (index + 1)).animate({
"top": (value[3]) * 26
}, "slow");
});
});
$(".reset").click(function() {
$.each(data1, function(index, value) {
$("div.hours" + (index + 1)).removeAttr('style');
});
});
</script>
</body>
</html>
我所做的是将所有行折叠到第一行上，然后检查哪些行与该行的原始行重叠，如果是这样，则在重叠的行上增加行号，然后转到下一行并重复该过程，直到所有元素整齐地堆叠起来。
你仍然需要清理javascript / jquery的东西，并将其放在一个不错的函数中。但作为概念证明，它似乎有效
工作实例：
http://jsbin.com/udofoq/26/watch
或
在这里看看我的小提琴。我认为它可以满足您所需的未移动块数。块数据取自 HTML 表。
JS：
var data = [],
rows = [],
chart = $('.wrapper-inner');
function DataItem(id, name, start, end){
this.id = id;
this.name = name;
this.start = start;
this.end = end;
}
$('.data tr').each(function() {
var $this = $(this),
item = new DataItem( $this.find('td:eq(0)').text(),
$this.find('td:eq(1)').text(),
$this.find('td:eq(2)').text(),
$this.find('td:eq(3)').text() );
data.push(item);
});
function addRow(){
var row = {
el : $('<div class="row"></div>').appendTo(chart),
positions: []
};
rows.push( row );
}
function checkRow(rowId, item){
var isRowAvailible = true;
for (var i = 0; i < +item.end - +item.start; i++){
if (rows[rowId].positions[+item.start + i]){
isRowAvailible = false;
break;
}
}
return isRowAvailible;
}
function markRowPositions(rowId, item){
for (var i = 0; i < item.end - item.start; i++){
rows[rowId].positions[+item.start + i] = true;
}
}
function addItems(){
for (var i = 0; i < data.length; i++){
(function(i){
setTimeout(function() {addItem(data[i])}, 100 * i);
})(i)
}
}
function addItem(item){
var rowToAdd = false,
itemEl = $('<div class="item"></div>');
for (var i = 0; i < rows.length; i++){
if ( checkRow(i, item) ){
rowToAdd = i;
break;
}
}
if (rowToAdd === false){
addRow();
rowToAdd = rows.length - 1;
}
rows[ rowToAdd ].el.append(itemEl);
console.log(itemEl.css('opacity'))
itemEl.css({
'left': item.start * 30,
'opacity' : 1,
'width': ( ( item.end - item.start ) * 30 ) - 2
});
markRowPositions(rowToAdd, item);
}
addItems();
