隐藏的内容占用高度(同位素) [英] Hidden content takes up height(isotope)
问题描述
我正在使用此库在我的网站上显示投资组合项目: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/
I am using this gallery to display portfolio items on my website: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/
它使用isotope-jquery显示项目,因此包含投资组合图片的div
容器根据其中的商品类别计算高度:
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>
我想做的是隐藏其中一些并添加load more
按钮.因此,我将要隐藏的名称重命名为隐藏输入的视频":
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>
然后使用jQuery,我使用hide()
使它们消失:
Then using jquery I use hide()
to make them disappear:
$("article.entry.video.hidden").hide();
尽管它们已成功隐藏,但它们仍会放置在容器div
上,因此会显示空白空间.我想这就是同位素自动工作的方式,但是有什么办法可以解决这个问题?
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?
也许有一种方法可以忽略div内文章元素的高度?
Maybe there is a way to ignore the height of the article elements that are inside the div?
推荐答案
因此,我没有尝试隐藏这些元素,而是给了它们一个新的类名(.designs_hidden),然后使用同位素追加来添加它们:
So instead of trying to hide those elements, I gave them a new class name(.designs_hidden) and then used the isotope append to add them:
var $newItems = $(".designs_hidden");
$(".loadMore").click(function(){
$pfcontainer.isotope('appended', $newItems);
$pfcontainer.isotope({ filter: '.designs,.designs_hidden' });
return false;
});
这篇关于隐藏的内容占用高度(同位素)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!