Masonry-Layout/script.js at master · danon321/Masonry-Layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


document.addEventListener('DOMContentLoaded', function(){
    let items = document.querySelectorAll(".masonry__item");
    items.forEach(function(item){
        min = Math.ceil(335);
        max = Math.floor(535);
        let random = Math.floor(Math.random() * (max - min + 1)) + min;

        item.style.height = random+'px';
    })
})

const grid = document.querySelector('.container');
const gridComputedStyle = window.getComputedStyle(grid);

// get number of grid rows
const gridRowCount = gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").length;

// get number of grid columns
const gridColumnCount = gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length;

console.log(gridRowCount, gridColumnCount);