I am using this gallery to display portfolio items on my website:http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/

It uses isotope-jquery to display the items so the div container that includes the portfolio images calculates the height based on the article classes that are within it:

<section class="main"> <div class="portfolio"> <article class="entry video"> <a data-rel="prettyPhoto" href="http://vimeo.com/34266952"> <img src="images/portfolio/work1.jpg" alt=""> <span class="video-hover"></span> </a> </article> <article class="entry video"> <a data-rel="prettyPhoto" href="http://vimeo.com/34266952"> <img src="images/portfolio/work1.jpg" alt=""> <span class="video-hover"></span> </a> </article> </div> </section>

What I want to do is to hide some of them and add a load more button. So I renamed the ones I want to hide to "entry video hidden":

<article class="entry video hidden"> <a data-rel="prettyPhoto" href="http://vimeo.com/34266952"> <img src="images/portfolio/work1.jpg" alt=""> <span class="video-hover"></span> </a> </article>

Then using jquery I use hide() to make them disappear:

$("article.entry.video.hidden").hide();

Although they are hidden successfully, they still take up place on the container div so there is empty space showing up. I suppose this is how isotope automatically works, but is there any way to come around this?