<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

window.onload = async function() { log.info("...index page loaded"); const api = await get_api_url(); let $grid = jQuery('.grid').masonry({ // specify itemSelector so stamps do get laid out \ itemSelector: '.grid-item', columnWidth: 80 }); let div = document.createElement('DIV'); div.classList.add("grid-item"); div.innerHTML = '3333333'; console.log(div); let $items = $('<div class="grid-item">222</div>'); $grid.append( $items ).masonry( 'appended', $items ); $grid.append( div ).masonry( 'appended', div ); } 02.12.22

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

• Home
• Notebook
• Contact us

• Privacy Statement
• 

Copyleft ☠ 2026