I'm currently trying to organize some fairly large images using masonry, but the code below doesn't seem to be working. I'm using node.js with express and have installed the masonryjs package in an attempt to make it work, but that approach didn't yield any results. I then tried utilizing the cdn version with no success either.
<!DOCTYPE html>
<html lang="en">
<head>
<title>web</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Styleheet -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<!-- masonry JS-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
<style>
.grid-item { width:10% }
</style>
<body>
<div class='grid'>
<div class="grid-item"><img src="images/photo/cat1/c11.jpg" alt=""></div>
<div class="grid-item"><img src="images/photo/cat1/c12.jpg" alt=""></div>
<div class="grid-item"><img src="images/photo/cat1/c13.png" alt=""></div>
<div class="grid-item"><img src="images/photo/cat1/c14.jpg" alt=""></div>
<div class="grid-item"><img src="images/photo/cat1/c15.png" alt=""></div>
</div>
</body>
</html>