垂直对齐div，但保持水平位置不变

Question

垂直对齐div，但保持水平位置不变

phpjavascriptjquerymysql

24

我从数据库中提取了一种带有特定起点和结束点的Div时间轴。它们中有一些重叠，有些可以并列放置。

最终，我想将它们滑动在一起，使它们尽可能紧凑，就像这样：

我不确定如何应对这个挑战：通过服务器端(php)脚本还是使用一些 JavaScript 浮动脚本？或者当然也可以采用完全不同的方法

有人能指引我正确的方向吗？

编辑：由于这是一个时间轴，所以Div的水平位置保持不变很重要。因此，将所有Div浮动到左侧或inline-block不是选项 :)

我的数据库设置：

id | name | start | end  
1  | a    | 2     | 7  
2  | b    | 5     | 10  
etc

- stUrb

2

它被称为甘特图 - 如果你在谷歌上搜索，你会看到一些用PHP\JS\CSS等编写的例子。 - user557846

不知道这种图表有一个名字！谢谢，尽管甘特/项目图看起来相同，但它们在根本上是不同的：你只有一行上的一个项目... - stUrb

你不能使用HTML5画布吗？这将大大简化问题，仅需解决“在哪里放置条形图”即可。纯CSS解决方案的问题在于浏览器之间的一致性。当然，HTML5的问题是...它并不适用于所有情况。 :( - Ian Atkin

添加了颜色随机化 :) 请查看 http://jsfiddle.net/whHXE/29/ - Michael Malinovskij

虽然我真的很喜欢 JavaScript Fiddle，但是 @paraoh 和 UV 给出的 PHP 和 MySQL 解决方案是我更喜欢的，因为它是服务器端的！感谢大家的努力！ - stUrb

显示剩余4条评论

10个回答

5

请看我的代码演示。我认为它可以满足你需要的无限制块数。块数据来自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();

- Michael Malinovskij

谢谢，伙计 :) 其实并不难，因为我很喜欢它，而且我认为它运行得相当不错。 - Michael Malinovskij

2

这是我能够得到的最接近的翻译。它接收一个json字符串，解析它并生成结果。它是完全动态的。元素按照它们在json数组中的顺序逐渐淡入。

工作演示

希望这有所帮助：

HTML：

    <div id="divHolder">
    </div>
    <input type="button" onclick="loadChart(json_data1);" value="Load Data 1" />
    <input type="button" onclick="loadChart(json_data2);" value="Load Data 2" />
    <input type="button" onclick="loadChart(json_data3);" value="Load Data 3" />

JS:

var json_data1 = '[{"id":1,"name":"A","start":2,"end":7},{"id":2,"name":"B","start":6,"end":9},{"id":3,"name":"C","start":8,"end":12},{"id":4,"name":"D","start":0,"end":5},{"id":5,"name":"E","start":7,"end":9}]';

var json_data2 = '[{"id":1,"name":"A","start":5,"end":7},{"id":2,"name":"B","start":6,"end":9},{"id":3,"name":"C","start":2,"end":6},{"id":4,"name":"D","start":2,"end":12},{"id":5,"name":"E","start":1,"end":9}, {"id":6,"name":"F","start":7,"end":11}, {"id":7,"name":"G","start":8,"end":12}, {"id":8,"name":"H","start":2,"end":4} ]';

var json_data3 = '[{"id":1,"name":"A","start":8,"end":12},{"id":2,"name":"B","start":4,"end":10},{"id":3,"name":"C","start":2,"end":4},{"id":4,"name":"D","start":0,"end":7},{"id":5,"name":"E","start":7,"end":11}, {"id":6,"name":"F","start":5,"end":7}]';

function loadChart(json_data){
    var data = JSON.parse(json_data);
    var divHolder = $('#divHolder');
    var maxWidth = $(document).width() - 200;
    var maxHeight = $(document).height();
    $(divHolder).empty();
    var maxEnd = 0;
    var minStart = 0;
    var widthUnit = 0;
    $(data).each(function(){
        if(this.end > maxEnd)
            maxEnd = this.end;
        if(this.start < minStart)
            minStart = this.start;
    });
    widthUnit = maxWidth / (maxEnd - minStart) ;
    var maxItemUnit = maxEnd;
    var rows = new Array();
    $(data).each(function(){
        var added = false;
        var currentObj = this;
        var i;
        for(i=0;i<rows.length;i++){
            var toAdd = true;
            //if(widthSum> maxItemUnit              
            var widthSum = 0;
            $(rows[i]).each(function(){
                widthSum += this.end - this.start;
                if(this.end < currentObj.start ||  this.start > currentObj.end){
                    if((widthSum + currentObj.end - currentObj.start) < maxItemUnit) 
                        toAdd = true;
                }                               
                else{
                    toAdd=false;
                    return false;
                }
            });
            if(toAdd){
                rows[i].push(currentObj);
                added = true;
                break;
            }
        }
        if(!added){
            rows[i] = new Array();
            rows[i].push(currentObj);
        }
    });

    $(rows).each(function(){
        var current = this;
        var divMain = $('<div></div>').css('display','block').css('width', maxWidth).css('height', 50)
        $(current).each(function(){
            var div = $('<div></div>');
            div.addClass('item').html('<span class="item-content">'+this.name+'</span>');
            var diff = this.end - this.start;
            div.attr('id', this.id).css('opacity','0').css('left', widthUnit * this.start).width(widthUnit * diff);
            if(diff < (maxItemUnit/3))
                div.addClass('small');
            else if (diff < (maxItemUnit/2))
                div.addClass('medium');
            else
                div.addClass('large');
            divMain.append(div);
        });
        $(divHolder).append(divMain);
    });
    var delayVar = 0;
    $(data).each(function(){
        $('#'+this.id).fadeTo(delayVar, 1);
        delayVar += 300;
    });
}

CSS：

.item{
    display:inline-block;
    position:absolute;
    color: #ffffff;
    border: 1px solid white;
}
.item-content{
    margin-left: 50%;
}
.small{
    background-color:#E66C3D;
}
.medium{
    background-color:#DDD634;
}
.large{
    background-color:#3EC043;
}

- Akhil Sekharan

2

您的问题听起来很幼稚，但实际上包含了一些复杂的元素，如果需要以最优化的方式解决。

对于如何生成您的显示屏，我可能会采取以下快速答案：

1. 使用提供的函数将行号添加到您的表中。 2. 使用您的 PHP 代码为每一行生成一个带有 style="display:block" 的 DIV 容器。 3. 在行内生成适当大小的 DIV（end-start * scale），并使用 style="display:inline-block; float:left; display:relative" 和 (EDIT:) 添加透明的 DIV 元素来补偿所需的白色空间（即从 0 到 start，从 end 到下一个 DIV 的开始）。 4. 在 DIV 元素内添加名称字段。

use mySchema;
drop procedure if exists tileItems;

DELIMITER $$
CREATE PROCEDURE tileItems ()
BEGIN
DECLARE p_id, p_start, p_end, p_row int;
DECLARE done INT DEFAULT FALSE;
DECLARE cur1 CURSOR FOR SELECT id, start, end FROM tasks order by start, id;
DECLARE CONTINUE HANDLER FOR NOT FOUND SET done = TRUE;

drop temporary table if exists tiles;

create temporary table tiles (
row int(11) NOT NULL,
id int(11) NOT NULL,
end int(11) NOT NULL
);
-- row field will indicates the row number the task should apear
OPEN cur1;
next_task: LOOP

FETCH cur1 into p_id, p_start, p_end;
  IF (done) THEN
    LEAVE next_task;
  END IF;
select min(row) from (select row, max(end) me from tiles t2 group by row) t1 
  where me < p_start
  into p_row;


-- take care of row numbering  
IF (p_row IS NULL) then
  select max(row) from tiles
    into p_row;
    IF (p_row IS NULL) then
      SET p_row = 0;
    END IF;
    SET p_row=p_row+1;
END IF;

insert into tiles (id, row, end)
  values (p_id,p_row,p_end);

END LOOP;

-- CLOSE cur1;
-- here is your output, on the PHP/.Net code you should loop on the row 
select tasks.*, tiles.row from tasks
inner join tiles
 on tasks.id = tiles.id
order by tiles.row, tasks.start;


END $$
DELIMITER ;

这是我用来检查的表格 -

CREATE TABLE `tasks` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `start` int(11) NOT NULL,
  `end` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=11 ;


INSERT INTO `tasks` (`id`, `name`, `start`, `end`) VALUES
(1, 'A', 2, 6),
(2, 'B', 5, 7),
(3, 'C', 8, 10),
(4, 'D', 1, 5),
(5, 'E', 6, 7);

关于优化的几句话（我最喜欢的主题之一 :) - 在这段代码中没有优化，这意味着任务将被分配给第一个可用的线路。为了最小化行数，可以（但需要一些时间）创建一个使用启发式方法解决此问题的函数。

输出：

id  name    start   end row
4   D   1   5   1
5   E   6   7   1
3   C   8   10  1
1   A   2   6   2
2   B   5   7   3

- UV.

固定的。我已经添加了输出示例。输出示例： Fixed. 我已经添加了输出示例。 - UV.

1

试试这个：

function collides($block1,$block2) {
  return ( ($block1['start'] >= $block2['start']) and ($block1['start'] <  $block2['end']) ) or
         ( ($block1['end']   >  $block2['start']) and ($block1['end']   <= $block2['end']) ) or
         ( ($block1['start'] <= $block2['start']) and ($block1['end']   => $block2['end']) );   
}

function FitsInRow ($row,$block) {
    $fits=true;
    foreach ($row as $block1) 
        if (collides($block,$block1))
            $fits=false;
    return $fits;
}

$rows=array();

// $blocks like that:
$blocks[0]['start']=0;
$blocks[0]['end']=10;
$blocks[0]['name']='A';
$blocks[0]['color']='#F00';

$blocks[1]['start']=5;
$blocks[1]['end']=20;
$blocks[1]['name']='B';
$blocks[1]['color']='#0F0';
//etc


foreach ($blocks as $block) {
    $i=0;
    while (isset($rows[$i]) && !FitsInRow($block,$rows[$i]))
        $i++;
    $rows[$i][]=$block;
}

echo '<div class="block_outer" style="height: '.(count($rows)*20).'px;">';
foreach ($rows as $nr=>$row)
    foreach ($row as $block)
        echo '<div class="block" style="left:'.$block['start'].'px; width:'.($block['end']-$block['start']).'px; top:'.($nr*20).'px; background-color:'.$block['color'].';">'.$block['name'].'</div>';
echo '</div>';

使用以下CSS：

.block {
  position:absolute;
  height:16px;
  /* ... */
}
.block_outer {
  position:relative;
  width:100%;
  overflow:auto;
}

虽然我没有测试过。

编辑：我已经更改了名称，以适应所提到的数据库设置。

另一个编辑：现在我已经添加了外部 div，这样内部 div 的绝对位置就不会破坏页面布局。

- Imanuel

谢谢！这正是我在寻找的！一个漂亮而干净的服务器端解决方案！ - stUrb

1

看一下 jQuery.Gantt 插件
http://taitems.github.com/jQuery.Gantt/

- Omid

0

你尝试过使用CSS将它们内联显示吗？

div.inline {
    display: inline-block;
}

当你的 div 具有类名为 inline。

- Austin Brunkhorst

1

问题是它们必须在水平方向上保持在同一位置。 - stUrb

3

很酷的问题...你应该将你上面发表的这个非常重要的评论添加到你的问题中。 - d-_-b

0

这看起来是一个很好的使用情况：

div.hours {
  position: absolute;
  top: 100px;
  left: 155px;
  width: 100px;
}

当然，将100px、155px、100px替换为您的值。

或者，您可以尝试在块内使用标签来创建条形图，设置position: relative和left/width值。

- Tuncay Göncüoğlu

好的，这听起来很公平，但是我需要某种算法将一些条形码放在一行上，而将其他条形码放在新的行上。然后我卡住了，就在这个算法上。 - stUrb

0

这并不是一件容易的事情，你需要使用 position: absolute 并计算出事件在页面中可见的位置，例如：一个完整的一天高度为10px，宽度为10px，我们需要在第一天添加一个事件，然后检查第一行是否为空或已有事件，如果为空，则放置事件，否则转到下一行并重复，直到分配到一行。

- José Roberto Araújo Júnior

0

你需要查看拓扑排序算法，然后要么自己实现它们（使用php或JavaScript），要么尝试找到一个合适的现成实现。

既不是CSS属性，也不是表格布局可以自动无缺地解决这个问题。

- Stan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stofke · Accepted Answer

<!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

或者

http://jsfiddle.net/stofke/7VP5U/