Fix masonry so it works if there are multiple grids on the same page

This commit is contained in:
Aroy-Art 2024-02-12 20:40:21 +01:00
parent 3de9992298
commit 1ce8d3af37
Signed by: Aroy
GPG key ID: 583642324A1D2070
3 changed files with 14 additions and 12 deletions

View file

@ -15,18 +15,20 @@ observer.observe();
/* ========================================================================= */
/* init Masonry for blog list
/* ========================================================================= */
var grid = document.querySelector('.blog-post');
var grids = document.querySelectorAll('.masonry-grid');
if (grid) {
var msnry = new Masonry(grid, {
percentPosition: true
});
grids.forEach(function(grid) {
if (grid) {
var msnry = new Masonry(grid, {
percentPosition: true
});
imagesLoaded(grid).on('progress', function() {
// layout Masonry after each image loads
msnry.layout();
});
}
imagesLoaded(grid).on('progress', function() {
// layout Masonry after each image loads
msnry.layout();
});
}
});
/* ========================================================================= */
/* Image Preloader

View file

@ -21,7 +21,7 @@
{{ partial "tagcloud.html" . }}
<div class="row blog-post" data-masonry='{ "percentPosition": true }'>
<div class="row masonry-grid" data-masonry='{ "percentPosition": true }'>
{{ $paginator := .Paginate .Data.Pages}}
{{ range $paginator.Pages }}
{{ .Render "article" }}

View file

@ -43,7 +43,7 @@
{{"<!-- /Section Title -->" | safeHTML}}
</div>
<div class="row portfolio-category" data-masonry='{ "percentPosition": true }'>
<div class="row portfolio-category masonry-grid" data-masonry='{ "percentPosition": true }'>
{{ $category := .name }}
{{ range .portfolio_items }}
{{- $original := resources.Get .image -}}