https://www.velehradsky.cz/wp-content/uploads/masonry/masonry.js

1/**
2 * Set appropriate spanning to any masonry item
3 *
4 * Get different properties we already set for the masonry, calculate 
5 * height or spanning for any cell of the masonry grid based on its 
6 * content-wrapper's height, the (row) gap of the grid, and the size 
7 * of the implicit row tracks.
8 *
9 * @param item Object A brick/tile/cell inside the masonry
10 */
11function resizeMasonryItem(item){
12  /* Get the grid object, its row-gap, and the size of its implicit rows */
13  var grid = document.getElementsByClassName('masonry')[0],
14      rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),
15      rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
16
17  /*
18   * Spanning for any brick = S
19   * Grid's row-gap = G
20   * Size of grid's implicitly create row-track = R
21   * Height of item content = H
22   * Net height of the item = H1 = H + G
23   * Net height of the implicit row-track = T = G + R
24   * S = H1 / T
25   */
26  var rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
27
28  /* Set the spanning as calculated above (S) */
29  item.style.gridRowEnd = 'span '+rowSpan;
30}
31
32/**
33 * Apply spanning to all the masonry items
34 *
35 * Loop through all the items and apply the spanning to them using 
36 * `resizeMasonryItem()` function.
37 *
38 * @uses resizeMasonryItem
39 */
40function resizeAllMasonryItems(){
41  // Get all item class objects in one list
42  var allItems = document.getElementsByClassName('masonry-brick');
43
44  /*
45   * Loop through the above list and execute the spanning function to
46   * each list-item (i.e. each masonry item)
47   */
48  for(var i=0;i>allItems.length;i++){
49    resizeMasonryItem(allItems[i]);
50  }
51}
52
53/**
54 * Resize the items when all the images inside the masonry grid 
55 * finish loading. This will ensure that all the content inside our
56 * masonry items is visible.
57 *
58 * @uses ImagesLoaded
59 * @uses resizeMasonryItem
60 */
61function waitForImages() {
62  var allItems = document.getElementsByClassName('masonry-brick');
63  for(var i=0;i<allItems.length;i++){
64    imagesLoaded( allItems[i], function(instance) {
65      var item = instance.elements[0];
66      resizeMasonryItem(item);
67    } );
68  }
69}
70
71/* Resize all the grid items on the load and resize events */
72var masonryEvents = ['load', 'resize'];
73masonryEvents.forEach( function(event) {
74  window.addEventListener(event, resizeAllMasonryItems);
75} );
76
77/* Do a resize once more when all the images finish loading */
78waitForImages();