instafeed.js next () Функция, ломающая CSS-сетку - PullRequest
Новая
       25

instafeed.js next () Функция, ломающая CSS-сетку

0 голосов
/ 29 июня 2018

Я использую CSS Grid для отображения всех фотографий, извлеченных instafeed.js. Он отлично работает для первого набора фотографий, но когда я добавляю кнопку «Загрузить еще ...» с помощью функции next(), это полностью нарушает сетку.

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

image

<style>
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, auto));
        grid-auto-rows: 200px;
        grid-gap: 1em;
    }

    @supports (display: grid) {
        .grid-gallery-item {
            margin: 0;
            max-width: none;
        }
    }

    .grid-gallery-item:first-child {
        grid-row: span 2;
        grid-column: span 2;
    }

    .grid-gallery-item:nth-child(3n+1):nth-child(even) {
        grid-row: span 2;
    }

    .grid-gallery-item:nth-child(3n+1):nth-child(odd) {
        grid-column: span 2;
    }

    .grid-gallery-item > img {
        width: 100%;
        /*max-*/height: 100%;
        object-fit: cover;
    }
</style>

<div class="container">
    <div id="instafeed" class="grid-gallery"></div>

    <div class="row">
        <div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2">
            <button type="button" class="btn btn-md btn-primary btn-block" name="load-more" id="load-more">Load More...</button>
        </div>
    </div>

    <script type="text/javascript">
        var loadButton = document.getElementById('load-more');
        var feed = new Instafeed({
            clientId: '<client ID>',
            get: 'user',
            userId: '<user ID>',
            accessToken: '<access token>',
            template: '<a href="{{link}}" class="grid-gallery-item" target="_blank"><img src="{{image}}" /></a>',
            resolution: 'standard_resolution',
            limit: 60,
            after: function() {
                if (!this.hasNext()) {
                    loadButton.setAttribute('disabled', 'disabled');
                }
            }
        });

        loadButton.addEventListener('click', function() {
            feed.next();
        });

        feed.run();
    </script>
</div>

1 Ответ

0 голосов
/ 27 февраля 2019

Добавление grid-auto-flow: dense; к моему .grid-gallery CSS заставило его работать.

...