Jquery Masonry 在 Safari 中不工作

Question

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

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

在 Masonry 中，我嵌入了 facebook posts，然后使用 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 初始化 Masonry 的代码

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

这是我的 CSS

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

请帮我解决这个问题。

Answer 1

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

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

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

Answer 2

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

Jquery Masonry 在 Safari 中不工作

Jquery Masonry is not working in Safari

css

safari

jquery

facebook

jquery-masonry