instafeed.js next() 函数中断 CSS 网格

Question

我正在使用 CSS 网格来显示 instafeed.js 拉入的所有照片。它非常适合第一组照片，但是当我使用 next() 函数添加 "Load More..." 按钮时，它完全破坏了网格布局。

图像显示第一个红色框是加载正常的初始图像，然后是第二个红色框是使用 next() 时加载的图像。

<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>

Answer 1

将 grid-auto-flow: dense; 添加到我的 .grid-gallery CSS 使其工作。

instafeed.js next() 函数中断 CSS 网格

instafeed.js next() Function Breaking CSS Grid

css

css-selectors

css-grid

instafeedjs