Кладка + изотоп + ленивый плагин - PullRequest
Новая
       97

Кладка + изотоп + ленивый плагин

0 голосов
/ 13 июля 2020

В проекте WordPress я использую Timber (TWIG) + masonry + isotope.

Но у меня много проектов для отображения. Поэтому я хотел бы использовать систему ленивой загрузки.

Я нашел здесь много решений с плагином lazyload, но ничего с ленивым плагином (http://jquery.eisbehr.de/lazy/).

Моя кладка сетка выглядит хорошо. Но когда я использую фильтры (изотопы), высота каждого элемента неверна.

Я пытался использовать этот код в своей функции, но безуспешно: 

$(window).scroll(function() {
   grid.isotope('reLayout');
});

Можно мне помогите пожалуйста?

скрипт. js

function init_lazy() {
    if ($('.page-projects').length > 0) {
        $('.lazy').Lazy({
            effect: 'fadeIn',
            effectTime: 600,
            threshold: 0
        });
    }
}

function init_masonry() {
    if ($('.masonry-list').length > 0) {
        $('.masonry-list').masonry({
            itemSelector: '.masonry-item',
            horizontalOrder: false
        });
    }
}

function init_isotope() {
    var grid = $('.isotope-list');

    grid.isotope({
        itemSelector: '.masonry-item',
        layoutMode: 'masonry'
    });

    var filters = {};

    $('.isotope-button').on('click', function(event) {
        var target = $(event.currentTarget);

        // get group key
        var buttonGroup = target.parents('.isotope-group');
        var filterGroup = buttonGroup.attr('data-filter-group');

        // set filter for group
        filters[ filterGroup ] = target.attr('data-filter');

        // combine filters
        var filterValue = concatValues( filters );

        if (target.hasClass('type-main')) {
            delete filters.subtags_dissertation;
            delete filters.subtags_subject_free;
            var filterValue = concatValues( filters );

            if (!target.hasClass('scratch')) {
                var filterValue = concatValues( '' );
            }
        }

        if (!target.hasClass('scratch') && target.hasClass('type-subject-free')) {
            delete filters.subtags_subject_free;
            var filterValue = concatValues( filters );
        }

        if (!target.hasClass('scratch') && target.hasClass('type-dissertation')) {
            delete filters.subtags_dissertation;
            var filterValue = concatValues( filters );
        }

        grid.isotope({ filter: filterValue });
    });

    // flatten object by concatting values
    function concatValues( obj ) {
        var value = '';
        for ( var prop in obj ) {
            value += obj[ prop ];
        }
        return value;
    }

    $(window).scroll(function() {
        grid.isotope('reLayout');
    });
}

projects.twig 

<a href="#" class="module-card hovering-item cursor-zone active">
    <div class="module-card__visual">
        <img data-src="{{ Image(item.required_img_highlight).src('medium_large') }}" height="{{ Image(item.required_img_highlight).height }}" width="{{ Image(item.required_img_highlight).width }}" class="module-card__img img-responsive lazy" alt="{{ Image(item.required_img_highlight).alt }}">
    </div>
    <div class="module-card__content">
        <h3 class="module-card__title">{{ item.title }}</h3>
        <div class="module-card__name style-border-top-bottom">
            <p class="module-card__name-text h-item">{{ item.author }}</p>
        </div>
    </div>
</a>
...