usecueweb development

Masonry by Usecue

Close
  • readme.txt
  • index.html
  • masonry.css
  • masonry.js

What is this?

This is a masonry script in ~100 lines of vanilla JS. It has two fill modes. The setting fillHorizontal = true adds each item to the next column (from left to right). When you set it to false, it adds each new item to the column with the lowest height. The script ‘relayouts’ after each image load and debounces on resize.

How to use it?

Layout your items using CSS grid and add the class masonry.

<div class="grid masonry">
  <div>
    <img src="image_url.jpg" />
    <h3>Lorem ipsum 1</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  ...
</div>
<link rel="stylesheet" href="masonry.css" />
<script src="masonry.js"></script>

Set the fill mode in the first line of the masonry.js file:

var fillHorizontal = false;

License

This code is licensed WTFPL.

 1<div class="grid masonry">
 2  <div>
 3    <img src="600x400.svg" />
 4    <h3>Lorem ipsum 1</h3>
 5    <p>Lorem ipsum dolor sit amet.</p>
 6  </div>
 7  <div>
 8    <img src="600x600.svg" />
 9    <h3>Lorem ipsum 2</h3>
10    <p>Lorem ipsum dolor sit amet.</p>
11  </div>
12  <div>
13    <img src="600x900.svg" />
14    <h3>Lorem ipsum 3</h3>
15    <p>Lorem ipsum dolor sit amet.</p>
16  </div>
17  <div>
18    <img src="600x400.svg" />
19    <h3>Lorem ipsum 4</h3>
20    <p>Lorem ipsum dolor sit amet.</p>
21  </div>
22  <div>
23    <img src="600x600.svg" />
24    <h3>Lorem ipsum 5</h3>
25    <p>Lorem ipsum dolor sit amet.</p>
26  </div>
27  <div>
28    <img src="600x900.svg" />
29    <h3>Lorem ipsum 6</h3>
30    <p>Lorem ipsum dolor sit amet.</p>
31  </div>
32  <div>
33    <img src="600x900.svg" />
34    <h3>Lorem ipsum 7</h3>
35    <p>Lorem ipsum dolor sit amet.</p>
36  </div>
37  <div>
38    <img src="600x400.svg" />
39    <h3>Lorem ipsum 8</h3>
40    <p>Lorem ipsum dolor sit amet.</p>
41  </div>
42  <div>
43    <img src="600x600.svg" />
44    <h3>Lorem ipsum 9</h3>
45    <p>Lorem ipsum dolor sit amet.</p>
46  </div>
47  <div>
48    <img src="600x1000.svg" />
49    <h3>Lorem ipsum 10</h3>
50    <p>Lorem ipsum dolor sit amet.</p>
51  </div>
52  <div>
53    <img src="600x400.svg" />
54    <h3>Lorem ipsum 11</h3>
55    <p>Lorem ipsum dolor sit amet.</p>
56  </div>
57  <div>
58    <img src="600x600.svg" />
59    <h3>Lorem ipsum 12</h3>
60    <p>Lorem ipsum dolor sit amet.</p>
61  </div>
62  <div>
63    <img src="600x400.svg" />
64    <h3>Lorem ipsum 13</h3>
65    <p>Lorem ipsum dolor sit amet.</p>
66  </div>
67  <div>
68    <img src="600x600.svg" />
69    <h3>Lorem ipsum 14</h3>
70    <p>Lorem ipsum dolor sit amet.</p>
71  </div>
72  <div>
73    <img src="600x900.svg" />
74    <h3>Lorem ipsum 15</h3>
75    <p>Lorem ipsum dolor sit amet.</p>
76  </div>
77</div>
78<link rel="stylesheet" href="/demos/masonry/masonry.css" />
79<script src="/demos/masonry/masonry.js"></script>
 1h3 {font-size: 1.25rem; margin-block: 0.5rem;}
 2img {max-width: 100%;}
 3p {margin-block: 0.5rem 1rem;}
 4.grid {
 5  display: grid;
 6  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 7  gap: 1rem;
 8  margin-bottom: 4rem;
 9  font-family: sans-serif;
10  align-items: flex-start;
11}
12.grid > *  {
13  position: relative;
14  padding: 10px;
15  box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.5);
16}
  1var fillHorizontal = false; //fill horizontally or fill based on the lowest column height
  2
  3function relayout() {
  4
  5    //check if grid still contains masonry class
  6    var grid = document.querySelector('.masonry');
  7    if(!grid) return;
  8    var masonryitems = grid.children;
  9
 10    //reset styles
 11    Array.from(masonryitems).forEach((item) => {
 12        item.style.position = '';
 13        item.style.width = '';
 14        item.style.height = '';
 15        item.style.boxSizing = '';
 16        item.style.top = '';
 17        item.style.left = '';
 18    });
 19    grid.style = '';
 20    grid.style.alignItems = 'flex-start';
 21
 22    function getColumnCount() {
 23        //get computed style of the grid beware of auto-fit and auto-fill
 24        var computedStyle = getComputedStyle(grid);
 25        var columnTemplate = computedStyle.gridTemplateColumns;
 26        //split the template into an array
 27        var columns = columnTemplate.split(' ');
 28        if (columns.length > 0) {
 29            return columns.length;
 30        } else {
 31            return 1; // Fallback to 1 column if unable to determine
 32        }
 33    }
 34    var columnCount = getColumnCount();
 35    var columnHeights = new Array(columnCount).fill(0);
 36    var gridWidth = grid.clientWidth;
 37    var computedStyle = getComputedStyle(grid);
 38    var columnGap = parseFloat(computedStyle.columnGap);
 39    var totalGapWidth = columnGap * (columnCount - 1);
 40    var columnWidth = (gridWidth - totalGapWidth) / columnCount;
 41    var rowGap = computedStyle.rowGap;
 42
 43    //create array to hold positions where item 0 goes into column 0, item 1 into column 1, etc.
 44    var column = -1;
 45    Array.from(masonryitems).forEach((item) => {
 46        if (item.style.display === 'none') return; //skip hidden items
 47        //store the width, height, column, left and top position in data attributes
 48        var itemHeight = item.getBoundingClientRect().height;
 49        if(fillHorizontal) {
 50            //use next column in order
 51            column = (column + 1) % columnCount;
 52        } else {
 53            //find the column with the minimum height
 54            column = columnHeights.indexOf(Math.min(...columnHeights));
 55        }
 56        item.setAttribute('data-width', columnWidth);
 57        item.setAttribute('data-height', itemHeight);
 58        item.setAttribute('data-column', column);
 59        item.setAttribute('data-left', (column * (columnWidth + columnGap)));
 60        item.setAttribute('data-top', columnHeights[column]);
 61        //update the height of that column
 62        columnHeights[column] += itemHeight + parseFloat(rowGap);
 63    });
 64    //apply the positions to the items
 65    Array.from(masonryitems).forEach((item) => {
 66        item.style.position = 'absolute';
 67        item.style.width = item.getAttribute('data-width') + 'px';
 68        item.style.height = item.getAttribute('data-height') + 'px';
 69        item.style.boxSizing = 'border-box';
 70        item.style.top = item.getAttribute('data-top') + 'px';
 71        item.style.left = item.getAttribute('data-left') + 'px';
 72    });
 73    //set the height of the grid to the maximum column height
 74    grid.style.position = 'relative';
 75    grid.style.display = 'block';
 76    grid.style.height = Math.max(...columnHeights) + 'px';
 77
 78}
 79
 80//debounce
 81function debounce(func, wait) {
 82    let timeout;
 83    return function executedFunction(...args) {
 84        const later = () => {
 85            clearTimeout(timeout);
 86            func(...args);
 87        };
 88        clearTimeout(timeout);
 89        timeout = setTimeout(later, wait);
 90    };
 91}
 92
 93//debounce on resize (100ms)
 94window.addEventListener('resize', debounce(() => {
 95    relayout();
 96}, 100));
 97
 98//on image load relayout
 99window.addEventListener('load', () => {
100    relayout();
101});
102
103//fire resize once to initialize
104window.dispatchEvent(new Event('resize'));