Поиск по диагонали

Для https://qna.habr.com/q/892135

by Vitaliy Koval

HTML

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

SCSS

*{
  box-sizing:border-box;
}
.list{
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:stretch;
  flex-wrap:wrap;
}
.item{
  width:25%;
  max-width:25%;
  height:100px;
  background:#ccc;
  padding:5px;
  display:flex;
 &::after{
    background:yellow;
    content:'';
    flex-grow:1;
 }
 &.is-active::after{
   background:red;
 }
}

JavaScript

[...document.querySelectorAll(`.item`)].forEach((item, key, arr) => {
  item.addEventListener("mouseenter", function( event ) {
    findDiagonaly(event.target, key, arr, event.target.parentNode)
  });
});

function findDiagonaly(el, key, list, parent){
	let listWidth = parent.getBoundingClientRect().width;
	let elWidth = el.getBoundingClientRect().width;
  let colInRowCount = parseInt(listWidth / elWidth);
  let myPosition = key + 1;
	let ePosition = myPosition + 1;
  let nextPosition = myPosition;
	let elems = [];
  let rowCorrect = Math.ceil(myPosition / colInRowCount);
  elems.push(myPosition);
  while(ePosition<=colInRowCount*rowCorrect){
 	 	ePosition++;
    nextPosition = nextPosition + colInRowCount + 1;
  	elems.push(nextPosition);
  }
  elems.forEach((el, elKey, elsArr) => {
  	if(list[el - 1]){
    		list[el - 1].classList.add('is-active');
    }
  });
  removeFindDiagonaly(el, list);
}

function removeFindDiagonaly(el, list){
  el.addEventListener("mouseout", ()=>{
    list.forEach((el, elKey, elsArr) => {
    	if(el){
      	el.classList.remove('is-active');
      }
  	});
    el.removeEventListener('mouseout', ()=>{}, false);
  });
}