Question

您好我正在使用Jquery Masonry它正在使用其他浏览器，例如Chrome，Firefox，但它在Windows浏览器中的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 Code来初始化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，所以砌成了所有图像加载后的项目。像这样设置你的代码：

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中不起作用。所以我已经降级为Masonry 3.32现在它适用于所有浏览器。

Jquery Masonry无法在Safari

2 个答案: