Skip to navigation

Setup simple Masonry02.12.22

<div class="grid">
  <div class="grid-item" style="height:90px;">1</div>
  <div class="grid-item grid-item--width2" style="height:50px;">2</div>
  <div class="grid-item" style="height:350px;">3</div>
  <div class="grid-item" style="height:80px;">4</div>
  <div class="grid-item" style="height:150px;">5</div>
  <div class="grid-item" style="height:90px;">1</div>
  <div class="grid-item grid-item--width2" style="height:50px;">2</div>
  <div class="grid-item" style="height:350px;">3</div>
  <div class="grid-item" style="height:80px;">4</div>
  <div class="grid-item" style="height:150px;">5</div>
    <div class="grid-item" style="height:90px;">1</div>
  <div class="grid-item grid-item--width2" style="height:50px;">2</div>
  <div class="grid-item" style="height:350px;">3</div>
  <div class="grid-item" style="height:80px;">4</div>
  <div class="grid-item" style="height:150px;">5</div>
    <div class="grid-item" style="height:90px;">1</div>
  <div class="grid-item grid-item--width2" style="height:50px;">2</div>
  <div class="grid-item" style="height:350px;">3</div>
  <div class="grid-item" style="height:80px;">4</div>
  <div class="grid-item" style="height:150px;">5</div>
    <div class="grid-item" style="height:90px;">1</div>
  <div class="grid-item grid-item--width2" style="height:50px;">2</div>
  <div class="grid-item" style="height:350px;">3</div>
  <div class="grid-item" style="height:80px;">4</div>
  <div class="grid-item" style="height:150px;">5</div>

</div>

window.onload = async function()
{
  log.info("...index page loaded");
    const api = await get_api_url();

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});
}

https://masonry.desandro.com/index.html

Reply

Anonymous

02.12.22

https://masonry.desandro.com/methods.html#appended

Reply

Anonymous