Isotope with Load More

Here is the demo and working code for easily creating grid with Isotope with Load more option. Just simply use the HTML, CSS and JS.

Visual:

HTML:

<div class="button-group-home filters-button-group">

<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".architecture">architecture</button>
<button class="button" data-filter=".interior">interior</button>
<button class="button" data-filter=".landscape">landscape</button>

</div>

<div class="grid" id="grid">
<div class="element-item architecture interior">
<p class="symbol">SS</p>
</div>
<div class="element-item interior">
<p class="symbol">Hg</p>
</div>
<div class="element-item landscape">
<p class="symbol">Hg</p>
</div>
<div class="element-item architecture">
<p class="symbol">Hg</p>
</div>
<div class="element-item interior">
<p class="symbol">Hg</p>
</div>
<div class="element-item landscape">
<p class="symbol">Hg</p>
</div>
<div class="element-item architecture">
<p class="symbol">Hg</p>
</div>
<div class="element-item interior">
<p class="symbol">Hg</p>
</div>
<div class="element-item landscape">
<p class="symbol">Hg</p>
</div>
<div class="element-item architecture">
<p class="symbol">Hg</p>
</div>
<div class="element-item interior">
<p class="symbol">Hg</p>
</div>
<div class="element-item landscape">
<p class="symbol">Hg</p>
</div>
<div class="element-item architecture">
<p class="symbol">Hg</p>
</div>
<div class="element-item interior">
<p class="symbol">Hg</p>
</div>
<div class="element-item landscape">
<p class="symbol">Hg</p>
</div>
</div>

<button class="button showMore" id="showMore" >show more</button>

CSS:

.visible_item{
display:none;
}

/* ---- button ---- */

.button {
display: inline-block;
padding: 10px 18px;
margin-bottom: 10px;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}

.button:hover {
background-color: #8CF;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}

.button:active,
.button.is-checked {
background-color: #28F;
}

.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
content: '';
display: block;
clear: both;
}

.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
border: 1px solid #333;
width: 600px;
}

/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}

/* ---- .element-item ---- */

.element-item {
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 5px;
padding: 10px;
background: #888;
color: #262524;
}

.element-item > * {
margin: 0;
padding: 0;
}

.element-item .name {
position: absolute;

left: 10px;
top: 60px;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
font-weight: normal;
}

.element-item .symbol {
position: absolute;
left: 10px;
top: 0px;
font-size: 42px;
font-weight: bold;
color: white;
}

.element-item .number {
position: absolute;
right: 8px;
top: 5px;
}

.element-item .weight {
position: absolute;
left: 10px;
top: 76px;
font-size: 12px;
}

JavaScript:

<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

// init Isotope
var initial_items = 5;
var next_items = 3;
var $grid = $('#grid').isotope({
    itemSelector: '.element-item',
    layoutMode: 'masonry',
    stamp: '.element-item--static'
});


// bind filter button click
$('.button-group-home').on('click', 'button', function () {
    var filterValue = $(this).attr('data-filter');
    // use filterFn if matches value
    $grid.isotope({filter: filterValue});
    updateFilterCounts();
});
function updateFilterCounts() {
    // get filtered item elements
    var itemElems = $grid.isotope('getFilteredItemElements');
    var count_items = $(itemElems).length;
   
    if (count_items > initial_items) {
        $('#showMore').show();
    }
    else {
        $('#showMore').hide();
    }
    if ($('.element-item').hasClass('visible_item')) {
        $('.element-item').removeClass('visible_item');
    }
    var index = 0;

    $(itemElems).each(function () {
        if (index >= initial_items) {
            $(this).addClass('visible_item');
        }
        index++;
    });
    $grid.isotope('layout');
}
// change is-checked class on buttons
$('.button-group-home').each(function (i, buttonGroup) {
    var $buttonGroup = $(buttonGroup);
    $buttonGroup.on('click', 'button', function () {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $(this).addClass('is-checked');
    });
});

function showNextItems(pagination) {
    var itemsMax = $('.visible_item').length;
    var itemsCount = 0;
    $('.visible_item').each(function () {
        if (itemsCount < pagination) { $(this).removeClass('visible_item'); itemsCount++; } }); if (itemsCount >= itemsMax) {
        $('#showMore').hide();
    }
    $grid.isotope('layout');
}
// function that hides items when page is loaded
function hideItems(pagination) {
    var itemsMax = $('.element-item').length;
    var itemsCount = 0;
    $('.element-item').each(function () {
        if (itemsCount >= pagination) {
            $(this).addClass('visible_item');
        }
        itemsCount++;
    });
    if (itemsCount < itemsMax || initial_items >= itemsMax) {
        $('#showMore').hide();
    }
    $grid.isotope('layout');
}
$('#showMore').on('click', function (e) {
    e.preventDefault();
    showNextItems(next_items);
});
hideItems(initial_items);

DemoDownload