Isotope with Load More

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:

 Isotope with Load More

Isotope with Load More

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

You may also like