JSFiddle - React, Tailwind, and code Playground

by Cupidvogel

HTML

<div class = 'container'>
<div class = 'drawColumn leaderDrawColumn'>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  
</div>

<div class = 'drawColumn'>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
</div>

<div class = 'drawColumn'>
  <div class = 'box'></div><div class = 'box'></div>
  <div class = 'box'></div><div class = 'box'></div>
</div>

<div class = 'drawColumn'>
  <div class = 'box'></div><div class = 'box'></div>
</div>

<div class = 'drawColumn'>
  <div class = 'box'></div>
</div>

<div class = 'universalClear'></div>
</div>

CSS

.drawColumn {
  width: 120px;
  background: yellow;
  padding-bottom: 10px;
  /* float: left; */
  display: inline-block;
  position: relative;
  white-space: nowrap;
  height: 603px;
}

.container {
  background: pink;
  white-space: nowrap;
  overflow-x:scroll;
}

.universalClear {
  width: 100%;
  height: 0;
  clear: both;
}


.box {
  width: 100px;
  height: 30px;
  background: red;
  border-radius: 8px;
  position: absolute;
  left: 0;
}

.leaderDrawColumn .box {
  position: relative;
}



.drawColumn:first-of-type .box:nth-child(2n + 1) {
  margin-bottom: 5px;
}

.drawColumn:first-of-type .box:nth-child(2n) {
  margin-bottom: 10px;
}

JavaScript

$(function() {
	/* alert($(".leaderDrawColumn .box:nth-child(2)").position().top) ;*/
  
  $(".drawColumn").not( ".leaderDrawColumn" ).each(function()
  {
  	var columnIndex = $(this).index();
    var previousColumn = $(".drawColumn").eq(columnIndex - 1);
    var previousColumnBoxes = previousColumn.find(".box");
  	$(this).find(".box").each(function(index)
    {
			var boxIndex = $(this).index();
      var topBoxOfPreviousColumn = previousColumnBoxes.eq(2 * boxIndex);
      var bottomBoxOfPreviousColumn = previousColumnBoxes.eq(2 * boxIndex + 1);
      
      var top = topBoxOfPreviousColumn.position().top;
      var bottom = bottomBoxOfPreviousColumn.position().top + $(this).height();
      var midWay = (bottom + top) / 2;
      var topOfCurBox = midWay - ($(this).height() / 2);
      $(this).css({top: topOfCurBox});
       //$(this).text(midWay);
      
    });
  });
  
})