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

【问题标题】：Vertically align div's but keeping horizontal position intact垂直对齐 div，但保持水平位置不变
【发布时间】：2012-11-21 14:44:11
【问题描述】：

我正在从数据库中提取一种具有特定起点和特定终点的 Div 时间线。其中一些重叠，其中一些可以彼此相邻安装。

最终我想将它们滑动在一起，使其尽可能紧凑，如下所示：

我怀疑如何应对这一挑战：通过服务器端 (php) 脚本或使用一些 javascript 浮动脚本。 或者当然是完全不同的方法

有人能把我推向正确的方向吗？

编辑:: 重要的是，因为它是一个时间线，所以 div 的水平位置保持不变。因此，将所有 div 浮动到左侧或内联阻止它们是没有选择的 :)

我的数据库设置：

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

【问题讨论】：

  • 它被称为甘特图 - 如果你用谷歌搜索，你会在 php\js\css 等中看到一些示例
  • 不知道这种图表有名字！谢谢，虽然甘特图/项目图看起来一样，但本质上是不同的：一行只有一个项目....
  • 方块的颜色取决于什么？
  • 颜色是随机的:)
  • @Dagon "Gantt" 应该大写，因为它是开发这个概念的人的名字。

标签： php javascript jquery mysql


【解决方案1】： 
<!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/

【讨论】：

  • 手动将块添加到 html 在作者用例中并不是很方便。恕我直言。
  • 你的意思是在css中？这只是使用 jquery 将元素放置在它们应该去的地方的问题。或者在 PHP 中进行。这不是困难的部分。这很简单。这与我们为排序所做的循环相同，但除了 top 之外的其他字段，您还可以设置 left 和 width。那是额外的3行。有时间我会补充的
  • 从现在开始我将开始在我的小提琴中放音乐；）
  • 之所以叫fiddle是有原因的
【解决方案2】：

查看我的fiddle here。我认为它可以通过无限数量的块满足您的需求。块数据取自 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();

【讨论】：

  • 谢谢伙计 :) 实际上并不难，因为我喜欢它，而且我认为它很酷。
【解决方案3】：

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

我可能会做些什么来生成你的显示的快速回答 -

  1. 使用提供的函数将行号添加到表中

  2. 使用您的 PHP 代码生成一个 DIV 容器 每一行的 style="display:block"

  3. 在行内生成合适大小的DIV（end-start * scale） 使用 style="display:inline-block; float:left; display:relative" 和 (EDIT:) 添加透明的 DIV 元素来补偿您需要的空白。 （即从0到开始，从结束到下一个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);

关于优化的几句话（我最喜欢的主题之一 :) - 在这段代码中没有优化，这意味着任务将被分配到第一个可用行。 为了尽量减少行数，它可能（但需要一些时间）创建一个使用Heuristic 方法的函数来解决这个问题。

输出：

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

【讨论】：

  • 已修复。我也添加了输出示例
【解决方案4】：

这是我能得到的最接近的。它接收一个 json_string，解析它并生成结果。它是完全动态的。元素按照它们在 json 数组中的顺序淡化。

Working Demo

希望这个问题：

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;
}

【讨论】：

    【解决方案5】：

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

    【讨论】：

      【解决方案6】：

      试试这个：

      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 的绝对位置不会破坏页面布局。

      【讨论】：

      • 谢谢！这就是我一直在寻找的！一个漂亮干净的服务器端解决方案！
      【解决方案7】：

      您是否尝试过使用 CSS 显示它们 inline？

      div.inline {
    display: inline-block;
}

      你的 div 有 inline 的类。

      【讨论】：

      • 问题是它们必须水平保持在同一个地方。
      • 很酷的问题...您应该将上述非常重要的评论添加到您的问题中。
      【解决方案8】：

      这看起来是一个很好的案例：

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

      当然，用你的值替换 100px、155px、100px。

      或者，您可以尝试对条形、块内、位置：相对和左/宽度值使用标签。

      【讨论】：

      • 好的。这听起来很公平，但是我需要某种算法来将一些条放在一条线上，而将另一些条放在新的条上。而那个算法就是我卡住的地方。
      【解决方案9】：

      没有简单的方法可以做到这一点，您需要使用position: absolute 并计算事件在页面中的可见位置，例如：一天一整天有10px height 和10px width，我们需要在day 1添加一个事件，然后我们检查line 1 is empty是否有一个事件，如果它是空的则put the event there，否则go to the next line and repeat直到它被分配到一行中。

      【讨论】：

        【解决方案10】：

        您需要查看topological sorting 算法，或者自己实现它们（在 php 或 JavaScript 中），或者尝试找到合适的现成实现。

        CSS 属性和表格布局都不会自动完美地解决这个问题。

        【讨论】：

          猜你喜欢
          • 2013-11-25
          • 2011-04-26
          • 1970-01-01
          • 2017-07-01
          • 2020-10-21
          • 1970-01-01
          • 2015-12-01
          • 1970-01-01
          • 2011-02-13
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode