Method for grid note display
const MAX_CHAR = 500;
const CHAR_CODE_START = 65;
window.onload = ()=>{
generate_random(20);
place_element();
window.onresize = place_element;
};
function generate_random(number) {
for (let i = 0; i < number; i++) {
const random = Math.floor(Math.random() * MAX_CHAR);
let string = String.fromCharCode(CHAR_CODE_START + i);
while(string.length < random)
string += string.charAt(0);
let div = document.createElement('div');
div.appendChild(document.createTextNode(string));
div.classList.add("grid-element","grid-element-normal");
div.setAttribute("data-element-id",i);
document.querySelector('.grid-container').appendChild(div);
}
for (let i = 0; i < number/2; i++) {
const random = Math.floor(Math.random() * MAX_CHAR);
let string = "FAV--" + String.fromCharCode(CHAR_CODE_START + i);
while(string.length < random)
string += string.charAt(5);
let div = document.createElement('div');
div.appendChild(document.createTextNode(string));
div.classList.add("grid-element","grid-element-fav");
div.setAttribute("data-element-id",i);
document.querySelector('.grid-container').appendChild(div);
}
}
function place_element(){
const container_size = document.querySelector(".grid-container").offsetWidth;
const element_size = document.querySelector(".grid-element").offsetWidth;
const column_count = Math.floor(container_size/element_size);
const element_offset = (container_size - element_size*column_count)/(column_count+1);
let column_height = new Array(column_count+1).join('0').split('').map(parseFloat);
for(let type of ["grid-element-fav","grid-element-normal"]) {
const element_count = document.querySelectorAll(`.${type}`).length;
for (let i = 0; i < element_count; i++) {
let element = document.querySelector(`.${type}[data-element-id=\"${i}\"]`);
const column_dest = _get_min_column(column_height);
element.style.transform = `translate(${_offset(element_offset, column_dest, element_size)}px,${column_height[column_dest]}px)`;
column_height[column_dest] += element.offsetHeight + 30;
}
const max = _get_max_column(column_height);
column_height[max] += 30;
for (let i = 0; i < column_count; i++) {
column_height[i] = column_height[max];
}
}
}
function _offset(element_offset,column_number,element_size){
return element_offset * (column_number + 1) + column_number * element_size;
}
function _get_min_column(column_height){
if(column_height.length === 1)
return 1;
else {
let chosen = 0;
let min = column_height[chosen];
for (let i = 1; i < column_height.length; i++) {
if(min>column_height[i]){
min = column_height[i];
chosen = i;
}
}
return chosen;
}
}
function _get_max_column(column_height){
if(column_height.length === 1)
return 1;
else {
let chosen = 0;
let max = column_height[chosen];
for (let i = 1; i < column_height.length; i++) {
if(max<column_height[i]){
max = column_height[i];
chosen = i;
}
}
return chosen;
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: #2a2a2e;
color:white;
overflow-y: auto;
overflow-x: hidden;
}
.grid-container {
overflow-y: inherit;
overflow-x: inherit;
}
.grid-element {
width: 200px;
padding: 20px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens:auto;
background-color: #0c0c0d;
border: solid 1px #42484f;
border-radius: 3px;
position: absolute;
transition: all 1s;
}