How to create isotope? - php

Question

I have three tables
categories
galleries
category_gallery
I want to create like this site . http://onepage-d7.demo.weebpal.com/#panel-second-wrapper .
GalleryController.php
public function gallery()
{
$galleries = Gallery::whereNotNull('image')->latest()->paginate(25);
$catCommittee = Category::where('parent_id',16)->get();
$categories = Category::where('parent_id', 42)->get();
return view('Home.galleries', compact('galleries','catCommittee', 'categories'));
}
galleries.blade.php
<div class="container">
<h2 class="mt-3 mb-3">{{ __('message.menu.galleries') }}</h2>
<div class="row">
<div class="container-fluid" style="margin-top:20px;">
<div class="row">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
#foreach($categories as $category)
<li class="nav-item">
<a class="nav-link" id="isotope-{{ $category->id }}-tab" data-toggle="pill" href="#isotope-{{ $category->id }}" role="tab" aria-controls="isotope-{{ $category->id }}" aria-selected="false">{{ $category->name }}</a>
</li>
#endforeach
</ul>
</div><hr noshade style="margin-top:-20px;">
<div class="container grid">
<div class="tab-content" id="pills-tabContent">
#foreach($categories as $key=>$category)
<?php $ok = false;?>
#foreach($category->galleries as $key=>$gallery)
<?php $ok = true;?>
#if(count($category->galleries) == 1 || $key == 0)
<div class="tab-pane fade" id="isotope-{{ $gallery->pivot->category_id }}" role="tabpanel" aria-labelledby="isotope-{{ $gallery->pivot->category_id }}-tab">
#endif
<div class="Portfolio">
<a href="#!">
<img class="card-img" src="{{ $gallery->image }}" alt="">
</a>
<div class="desc">{{ $gallery->title }}</div>
</div>
#if(count($category->galleries) == 1 || count($category->galleries) == ++$key)
</div>
#endif
#endforeach
#if(!$ok)
<div class="tab-pane fade" id="isotope-{{ $category->id }}" role="tabpanel" aria-labelledby="isotope-{{ $category->id }}-tab"></div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</div>
I tried show isotope for my site but was not successful.
ajax
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
<script>
$('.nav-item .nav-link').trigger('click');
$('.nav-item .nav-link').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('id');
$('#pills-tabContent').isotope({ filter: '#'+id });
})
</script>