Masonry Gallery

by BrainlessDesign

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<div class="db-gallery clearfix cl-3">
	<div class="db-gallery-hidden db-gallery-sizer"></div>
  <div class="db-gallery-item blurry slide-up db-are-unloaded" data-tag="CategoryName">
		<div class="db-gallery-img-container">
			<video controls preload="metadata" src="http://www.exit109.com/~dnn/clips/RW20seconds_1.mp4" class="dbg-video"></video>
		</div>
	</div>
	<div class="db-gallery-item blurry slide-up db-are-unloaded" data-tag="CategoryName">
		<div class="db-gallery-img-container">
			<img src="https://i.picsum.photos/id/687/200/200.jpg" class="db-gallery-image">
			<a href="https://i.picsum.photos/id/687/200/200.jpg">
				<div class="db-gallery-caption slide-up full">
					<h5>Images</h5>
					<figcaption>Images</figcaption>
				</div>
			</a>
		</div>
	</div>
	<div class="db-gallery-item blurry slide-up db-are-unloaded" data-tag="CategoryName">
		<div class="db-gallery-img-container">
			<video controls preload="metadata" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4" class="dbg-video"></video>
		</div>
	</div>
	<div class="db-gallery-item blurry slide-up db-are-unloaded" data-tag="CategoryName">
		<div class="db-gallery-img-container">
			<img src="https://i.picsum.photos/id/732/300/200.jpg" class="db-gallery-image">
			<a href="https://i.picsum.photos/id/732/300/200.jpg">
				<div class="db-gallery-caption slide-up full">
					<h5>Images</h5>
					<figcaption>Images</figcaption>
				</div>
			</a>
		</div>
	</div>
<div class="db-gallery-item blurry slide-up db-are-unloaded" data-tag="CategoryName">
		<div class="db-gallery-img-container">
			<img src="https://i.picsum.photos/id/603/500/350.jpg"...

CSS

body {
  background-color: #303030;
}

.db-gallery {
width: 100%;
margin: 0 auto;
clear: both;
box-sizing: border-box !important;
min-height: 200px;
}
.clearfix {
display: inline-block;
clear: both;
}
.clearfix::after, .clearfix::before {
    content: '';
    display: table;
    box-sizing: border-box !important;
  }
.db-gallery-item {
    float: left;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box !important;
    overflow: hidden;
}

.db-gallery-hidden {
    visibility: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

.db-are-unloaded{
	opacity: 0;
  display: none;
}

.cl-3 .db-gallery-item, .cl-3 .db-gallery-sizer {
    width: calc(33% - 20px);
}

.db-gallery-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.db-gallery-img-container a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.db-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.3s ease;
}
.db-gallery .db-gallery-caption {
    opacity: 0;
    transition: 0.3s ease;
    position: absolute;
    text-align: center;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.db-gallery-caption.boxed {
    opacity: 1;
    position: relative;
}
.db-gallery .db-gallery-caption.full {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.db-gallery .db-gallery-caption.partial {
    bottom: 0;
    left: 0;
    width: 100%;
}
.db-gallery .db-gallery-caption.slide-up.full {
    height: 0;
    bottom: 0 !important;
    top: auto;
}
.db-gallery .db-gallery-caption.slide-up.partial {
	height: auto;
	bottom: -300px !important;
}
.db-gallery-item:hover .db-gallery-caption.full {
    height: 100%;
}
.db-gallery .db-gallery-caption h5 {
    margin: 0 1%;
    word-break: break-word;
}

/* NO EFFECT */
.db-gallery-item:hover .db-gallery-caption {
    opacity: 1;
}

/* SLIDE UP...

JavaScript

//ITEMS
							var items = $('.db-gallery-item');
							var i_length = items.length;
							// GRID
							var $grid = $('.db-gallery').masonry({
								'itemSelector': 'none',
								'columnWidth': '.db-gallery-sizer',
								'percentPosition': true,
								'gutter': 20,
								'visibleStyle': { transform: 'translateY(0)', opacity: 1 },
								'hiddenStyle': { transform: 'translateY(100px)', opacity: 0 },
							});
							//ITEM REVEAL
							$grid.masonry( 'option', { itemSelector: '.db-gallery-item' });
							
							if(i_length > 0) {
								(async function() {
									for (i = 0; i < i_length; i++) {
										var item = $(items[i]);
										if($(item).find('.dbg-video').length == 1) {
											var video = $(item[0]).children().children();
											if(video[0].readyState > 3) {
												item.removeClass('db-are-unloaded');
												$grid.masonry('appended', $(item));
											}
											else {
												await new Promise(resolve => video[0].addEventListener('loadeddata', resolve));
												$(item[0]).removeClass('db-are-unloaded');
												$grid.masonry('appended', $(item[0]));
											}
										}
										else if($(item).find('.db-gallery-image').length == 1) {
											await new Promise(resolve => $(item[0]).imagesLoaded().done(resolve));
											$(item[0]).removeClass('db-are-unloaded');											
											$grid.masonry('appended', $(item[0]));
										}
									}
								}());
							}