將jquery砌體整合到zurb基礎網格中

我遇到了將砌體與基礎網格佈局集成的問題。基本上使用不同高度的相同寬度的圖像，砌體按預期工作，但在某些斷點處，網格僅具有兩列布局而不是通常的四個佈局。將jquery砌體整合到zurb基礎網格中

但是，如果您繼續最小化瀏覽器寬度，則四列會返回，因此不能顯示它們沒有空間顯示它們。

var $container = $('#work_grid'); 

$container.imagesLoaded(function(){ 
$('#work_grid').masonry({ 
    itemSelector: '.work_item', 
    isAnimated: true,  
});

HTML

<div class="row"> 
    <div class="twelve columns"> 
     <div id="work_grid" class="block-grid four-up"> 
      <li class="work_item"><img src="stylesheets/images/work1.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work2.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work3.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work4.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work5.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work6.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work7.jpg" alt=""></li> 
     </div> <!-- /.block-grid four-up --> 
    </div> <!-- /.twelve columns --> 
</div> <!-- /.row -->

Working initially now not working

working again

來源

2013-03-11 onjegolders

如果您可以提供實時鏈接，最好的情況是發生這種情況。 – darshanags 2013-03-19 13:42:22

爲約爲什麼您的問題正在發生的事情回答你的問題：不幸的是，因爲整合masonr y和框架可能會非常棘手，因爲它們都試圖以完全不同的方式控制圖像（基金會希望調整大小，砌體要重新定位）。解決此問題的最佳方法是使用基礎容器作爲砌體容器，其中的圖像不會調整大小，但將在流體容器內重新定位，而對齊容器以避免出現在右側的不利邊緣問題當圖像不能放入額外的列時，容器的容量。

=== UPDATE ===

我this github repository更新的代碼庫有最先進的最新版本基金會在此更新（5.0.2）的時間，如果你想使用它。

來源

2013-04-09 21:26:50 Dylan

非常感謝Dylan花時間做到這一點！ – onjegolders 2013-04-10 08:28:29

@onjegolders沒問題，我其實只是在上個月工作！我找到了你的文章，因爲我想拯救任何其他人試圖解決它的麻煩 – Dylan 2013-04-10 13:31:55

偉大的工作@Dylan！你節省了我的工作時間。我對砌體和基金會都很陌生，並且很難理解差異並在它們之間做出選擇。那謝謝啦！ – LeeTee 2013-10-22 17:55:04

將jquery砌體整合到zurb基礎網格中

回答

相關問題