Question

我已在我工作室的当前网站上实施了Instafeed，以两行图像显示我们的Instagram Feed。自从我们允许纵向和横向照片通过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

每当我在过去使用过砌体并且我的项目包含图像时，我总是不得不将它与使用imagesLoaded插件结合起来。

最可能发生的是砌体插件在加载图像之前初始化布局，因此计算出的每个项目的位置/高度都不准确。

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

使用砌体显示Instafeed图像

1 个答案: