Question

我正在使用此图库在我的网站上显示投资组合项目： http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/

它使用isotope-jquery来显示项目，因此包含项目组合图像的div容器根据其中的文章类计算高度：

<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按钮。所以我将我要隐藏的内容重命名为“隐藏录入视频”：

<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()使它们消失：

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

虽然它们已成功隐藏，但它们仍会占据容器div，因此会显示空白区域。我想这就是同位素自动运行的方式，但是有什么方法可以解决这个问题吗？

也许有办法忽略div中文章元素的高度？

Answer 1

因此，我没有试图隐藏这些元素，而是给了他们一个新的类名（.designs_hidden），然后用同位素附加来添加它们：

var $newItems = $(".designs_hidden");
$(".loadMore").click(function(){
$pfcontainer.isotope('appended', $newItems);
$pfcontainer.isotope({ filter: '.designs,.designs_hidden' });
return false;
});

隐藏内容占用高度（同位素）

1 个答案: