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中不工作

回答

相關問題