Скрытое содержимое занимает высоту (изотоп)

Question

Скрытое содержимое занимает высоту (изотоп)

0

Я использую эту галерею для отображения элементов портфеля на своем веб-сайте: 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?

lonewulf 16 фев. 2014, в 13:52

Источник

Теги:

jquery

html

height

jquery-isotope

hide

1 ответ

Ещё вопросы

lonewulf · Accepted Answer · 2014-03-18T05-50-00.000Z

Поэтому вместо того, чтобы скрывать эти элементы, я дал им новое имя класса (.designs_hidden), а затем использовал изотоп, добавленный для их добавления:

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