css - instafeed.js next() 函数破坏 CSS 网格

问题描述

我正在使用 CSS Grid 来显示由 instafeed.js 提取的所有照片。它完美地适用于第一组照片，但是当我使用该next()功能添加“加载更多...”按钮时，它完全破坏了网格布局。

该图像显示了第一个红色框，它们是加载良好的初始图像，然后是第二个红色框，它们是使用时加载的图像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>

标签： csscss-selectorscss-gridinstafeedjs

css - instafeed.js next() 函数破坏 CSS 网格

问题描述

解决方案

推荐阅读