@offensichtbar-codestock/es6-flex-masonry-grid
Version:
99 lines (88 loc) • 4.89 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offensichtbar Masonry Grid</title>
<link rel="stylesheet" type="text/css" href="./demo.css">
<link rel="stylesheet" type="text/css" href="./bundle.min.css">
</head>
<body>
<section class="container">
<div id="demo_masonry-grid">
<div id="card1">
<div>
<img alt="" src="https://i.postimg.cc/tgMnbr02/osb-demo-1280x720.jpg" width="1280" height="720"/>
<h2>Card 1</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis.</span></p>
</div>
</div>
<div id="card2">
<div>
<img alt="" src="https://i.postimg.cc/SR0X2Jx9/osb-demo-1280x990.jpg" width="1280" height="990"/>
<h2>Card 2</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span></p>
</div>
</div>
<div id="card3">
<div>
<img alt="" src="https://i.postimg.cc/tgMnbr02/osb-demo-1280x720.jpg" width="1280" height="720"/>
<h2>Card 3</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span></p>
</div>
</div>
<div>
<div>
<img alt="" src="https://i.postimg.cc/SR0X2Jx9/osb-demo-1280x990.jpg" width="1280" height="990"/>
<h2>Card 4</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet</span></p>
</div>
</div>
<div>
<div>
<img alt="" src="https://i.postimg.cc/tgMnbr02/osb-demo-1280x720.jpg" width="1280" height="720"/>
<h2>Card 5</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></p>
</div>
</div>
<div>
<div>
<img alt="" src="https://i.postimg.cc/SR0X2Jx9/osb-demo-1280x990.jpg" width="1280" height="990"/>
<h2>Card 6</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span></p>
</div>
</div>
<div>
<div>
<img alt="" src="https://i.postimg.cc/tgMnbr02/osb-demo-1280x720.jpg" width="1280" height="720"/>
<h2>Card 7</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span></p>
</div>
</div>
<div>
<div>
<img alt="" src="https://i.postimg.cc/SR0X2Jx9/osb-demo-1280x990.jpg" width="1280" height="990"/>
<h2>Card 8</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span></p>
</div>
</div>
<div>
<div>
<img alt="" src="https://i.postimg.cc/tgMnbr02/osb-demo-1280x720.jpg" width="1280" height="720"/>
<h2>Card 9</h2>
<p><strong>Edit text:</strong><span class="textarea" role="textbox" contenteditable>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span></p>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="./bundle.js"></script>
<script>
const OSB_GRID = document.querySelector('#demo_masonry-grid');
const grid = new OSB_MasonryGrid(OSB_GRID, {
animation: true,
animationType: 'slideIn',
animationDelay: 300,
observeDOM: true
});
</script>
</body>
</html>