![](/img/trans.png)
[英]Instafeed.js - Instagram script CSS Styling Not Applying To Elemements
[英]instafeed.js next() Function Breaking CSS Grid
我正在使用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>
添加grid-auto-flow: dense;
到我的.grid-gallery
CSS使它起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.