Jquery Masonry在Safari中不工作

嗨，我使用的是Jquery Masonry它正在Chrome，Firefox等其他浏览器上工作，但它不适用于Windows中的Safari浏览器以及Mac上的Safari 8。Jquery Masonry在Safari中不工作

的问题是，所有的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 Gallery

在砌体中，我嵌入了facebook的帖子，然后使用砌体容器在其上应用砌体造型。

这里是我的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%; }

请请帮我在这。

来源

2016-05-27 usama

-1

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

来源

2016-07-10 11:49:41 usama

砌体4在Safari中正常工作。现在使用它。 – Macsupport

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

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

Safari 5在Windows？男人，那个浏览器版本在2012年最后更新了！做更多的10人在Windows中实际使用它吗？ ;-)

来源

2016-05-28 21:06:57 Macsupport

实际上，我并没有在图像上使用砌体，因此我在facebook嵌入式帖子上使用它，因此imagesloaded.js不起作用 – usama

实际上，您是因为.grid项中的FB帖子都包含图像或那只是一种幻觉？此外，您还需要张贴您正在使用嵌入的职位 – Macsupport

的代码是这样

也帖子可以图片或Facebook – usama

Jquery Masonry在Safari中不工作

回答

相关问题