javascript - 使用 Masonry 显示 Instafeed 图像

Question

我在我工作室的当前网站上实现了 Instafeed，以在两行图像中显示我们的 Instagram 提要。自从我们允许通过 API 提供纵向和横向照片以来，我们一直在顶部和底部行之间出现间隙，因为有些图像会比其他图像短。

我们目前正在尝试实现砖石结构，以使底部的行堆叠在顶部并摆脱那些尴尬的空间，但我们无法让整个事情发挥作用。

理论上，应该这样做:

HTML:

<div id="instafeed">
<!-- width of .grid-sizer used for columnWidth -->
<div class="grid-sizer"></div>
<a><!--- these are the a attributes populated by Instafeed --></a>
<a><!--- these are the a attributes populated by Instafeed --></a>
<a><!--- these are the a attributes populated by Instafeed --></a>
...
</div>

CSS:

.grid-sizer {width:16%}
#instafeed {width:100%;margin-bottom:-.8%}
#instafeed a {width:16%;margin:0 0 .8% .8%;float:left}
#instafeed>:first-child,#instafeed>:nth-child(6n+7) {margin-left:0;clear:left;}
#instafeed a img {width:100%;height:auto;zoom:1;box-shadow:#000 0 0 0;opacity:1;-moz-transition:all .5s ease;-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
#instafeed a img:hover {zoom:1;opacity:.5}

Javascript:

$('#instafeed').masonry({
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '#instafeed a',
// use element for option
columnWidth: '.grid-sizer',
percentPosition: true
})

这在理论上应该可行，但是当我插入它时，照片不仅不会自己堆叠，而且通常会掉到第二行，网站底部完全崩溃。

任何帮助都会很棒!

Answer 1

每当我过去使用 masonry 并且我的元素包含图像时，我总是不得不将它与 imagesLoaded 插件的使用结合起来。

最有可能发生的情况是，masonry 插件在加载图像之前正在初始化布局，因此计算出的每个元素的位置/高度不准确。

希望对您有所帮助: http://masonry.desandro.com/faq.html#how-do-i-fix-overlapping-item-elements