JavaScript : 플러그인을 사용하지 않고 사각형 요소 테트리스 스타일을 어떻게 쌓으시겠습니까?

Question

나는 스케쥴링 캘린더를 만들고있다. 이벤트는 가로 블록입니다 (Google 캘에는 세로 블록이 있습니다). 그리고 이런 모든 공간을 낭비하지 않고 하나의 날짜 나 이벤트가 서로에 스택하려는 이벤트의 부하를 가지고 있기 때문에 :

내가 찾았어요 플러그인 :
http://masonry.desandro.com/
http://isotope.metafizzy.co/
http://packery.metafizzy.co/
하지만를 이 간단한 일을하기 위해 30kb 플러그인을 사용하는 것에 열중하지 않습니다.

명확히하기 : 타임 라인이기 때문에 div 이벤트는 왼쪽/오른쪽으로 이동할 수 없지만 다른 div 이벤트 사이에 수직으로 맞춰야합니다.

Answer 1

내 솔루션은 이벤트에 대해서는 절대 위치 지정을 사용하고 각 행에 대한 컨테이너로 div를 사용하는 2.6kb (주석 처리 된) jQuery 스크립트입니다.

이 스크립트는 무작위로 크기 막대를 생성합니다. 각 새 막대는 위에서 아래로 각 행의 공간을 확인합니다. 백분율을 사용하고 있습니다. 시간에 따른 막대의 위치를 ​​계산하는 것이 쉽습니다 (100 %/24h).

http://jsfiddle.net/cj23H/5/
작품 비록과는 부피가 큰 느낌, 충분히 효율적입니다. 개선 할 수 있습니다.

내 jsfiddle에서

jQuery 코드 :

function rand() { 
    return Math.floor(Math.random() * 101); 
} 

function get_target_row(width, left) { 
    var i = 0; 
    var target_found = false; 

    // Loop through all the rows to see if there's space anywhere 
    while (target_found === false) { 

     // Define current row selector 
     var target_i = '.personnel#row' + i; 

     // Add row if none 
     if ($(target_i).length === 0) { 
      $('body').append('<div class="personnel" id="row' + i + '"></div>'); 
     } 
     // See if there's space 
     if ($(target_i).children().length === 0) { 
      target_found = $(target_i); 
     } else { 
      var spaceFree = false; 

      // Check collision for each child 
      $(target_i).children().each(function() { 

       // Get left and right coordinates 
       var thisWidthPx = parseFloat($(this).css('width'), 10); 
       var thisWidthParentPx = parseFloat($(this).parent().css('width'), 10); 
       var thisWidth = (thisWidthPx/thisWidthParentPx * 100); 
       var thisLeftPx = parseFloat($(this).css('left'), 10); 
       var thisLeftParentPx = parseFloat($(this).parent().css('left'), 10); 
       var thisLeft = (thisLeftPx/thisWidthParentPx * 100); 
       var thisRight = thisLeft + thisWidth; 
       var right = left + width; 

       // Sexy way for checking collision 
       if ((right > thisLeft && right < thisRight) || (left < thisRight && left > thisLeft) || (thisLeft > left && thisLeft < right) || (thisRight < right && thisRight > left)) { 
        spaceFree = false; 
        return false; 
       } else { 
        spaceFree = true; 
       } 
      }); 

      // If no children have collided break the loop 
      if (spaceFree === true) { 
       target_found = $(target_i); 
      } 
     } 
     i++; 
    } 

    // If after all the while loops target is still not found... 
    if (target_found === false) { 
     return false; 
    } 

    // Else, if target is found, return it. 
    return target_found; 
} 

// Generate random bars 
for (var i = 0; i < 10; i++) { 
    var width = rand()/2; 
    var left = rand()/2; 
    var right = left + width; 
    var target = get_target_row(width, left); 
    target.append('<div class="block" style="width:' + width + '%;position:absolute;left:' + left + '%;background-color:rgba(' + rand() + ',' + rand() + ',' + rand() + ',0.4)" id="bar'+i+'">' + 'b' + i + '</div>'); 
} 

CSS :

.block { 
    position: absolute; 
    background-color: rgba(200, 100, 100, 0.4); 
    height: 32px; 
} 
.personnel { 
    position: relative; 
    float: left; 
    width: 100%; 
    height: 33px; 
}