User-832373396 posted
Hi Thisls,
How do I make this masonry jquery code
Sir, here is the full working code
<!DOCTYPE html>
<!-- saved from url=(0103)https://s.codepen.io/boomerang/iFrameKey-204bf510-7db8-c2c6-f435-ec4e18dfb17e/index.html?editors=1000#0 -->
<html lang="en" class=""><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style class="cp-pen-styles"> .grid {
background: #EEE;
max-width: 1200px;
}
.grid-item {
width: 160px;
height: 120px;
float: right;
background: #D26;
border: 2px solid #333;
margin: 5px;
}
.color-gold {
background-color: gold;
color: yellow;
}
</style></head><body>
<div class="grid" style="; height: 670px;"><div class="grid-item color-gold" style="; left: 0px; top: 0px;"></div>
<div class="grid-item" style="; left: 0px; top: 134px;"></div>
<div class="grid-item" style="; left: 174px; top: 134px;"></div>
<div class="grid-item" style="; left: 0px; top: 268px;"></div>
<div class="grid-item" style="; left: 174px; top: 268px;"></div>
<div class="grid-item" style="; left: 0px; top: 402px;"></div>
<div class="grid-item" style="; left: 174px; top: 402px;"></div>
<div class="grid-item" style="; left: 0px; top: 536px;"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script>
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
}).masonry({ transitionDuration: '2.75s' });
$(function () {
var $items = $('.color-gold');
$grid.prepend($items)
.masonry('prepended', $items)
})
</script>
</body></html>
and we could test it at W3cshool online https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
Guide
https://masonry.desandro.com/extras.html#requirejs
With regards, Angelina Jolie
Masonry - Prepend
