Jquery Masonry 在 Safari 中不起作用答案

【问题标题】：Jquery Masonry is not working in SafariJquery Masonry 在 Safari 中不起作用
【发布时间】：2016-05-27 10:05:36
【问题描述】：

您好，我正在使用Jquery Masonry，它在 Chrome、Firefox 等其他浏览器上运行，但在 Windows 上的 Safari 浏览器 5 和 Mac 上的 Safari 8 上无法运行。

问题是所有的 div 都有 top : 0px 这个 div <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid-item grid-item--width2" > 由于所有帖子都显示在彼此之上，这里是 safari 中帖子的图片链接Image 这是 Masonry 不工作的页面的链接Masonry Gallery

在 Masonry 中，我嵌入 facebook 帖子，然后使用 Masonry 容器在其上应用 Masonry 样式。

这是我的html

 <div class="grid row">
  <div class="inspiration-gallery">
    <div class="grid-sizer"></div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid-item grid-item--width2" >
      <div class="inspiration-grid">
        <div class="fbpost-inspiration" id="fbpost-inspiration">
          <div class="fb-post" id="myId" data-href="post_url" data-width="200" data-height="200"></div>
        </div>

      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

这是我初始化砌体的 Jquery 代码

var $container = $('.grid');
$container.masonry({
    columnWidth: '.grid-sizer',
    itemSelector: '.grid-item',
    percentPosition: true
});

这是我的 CSS

.grid-sizer,.grid-item { width:33.33333333%; }

请帮帮我。

【问题讨论】：

标签： jquery css facebook safari jquery-masonry

【解决方案1】：

您需要使用imagesloaded.js，以便在加载所有图像后砌体布置项目。像这样设置你的代码：

var $container = $('.grid');
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});

Windows 中的 Safari 5？伙计，那个浏览器版本最后一次更新是在 2012 年！有超过 10 个人在 Windows 中实际使用它吗？ ;-)

【讨论】：

实际上我没有在图像上使用砖石，我在 Facebook 嵌入式帖子上使用它，所以 imagesloaded.js 不起作用
实际上，您是，因为您的 .grid-item 中的 FB 帖子都包含图像，或者这只是一种错觉？此外，您需要发布用于嵌入帖子的代码
代码是这个

帖子也可以是图片或facebook的视频
不是帖子的html，而是加载帖子的javascript代码。

【解决方案2】：

我正在使用 Masonry 4。Masonry 4 在 Safari 中不起作用。所以我已降级到 Masonry 3.32 现在它适用于所有浏览器。

【讨论】：