8

組積造を Foundation グリッド レイアウトに統合する際に問題が発生しています。基本的に、幅が同じで高さが異なる画像では、石積みは期待どおりに機能しますが、特定のブレークポイントでは、グリッドは通常の 4 列ではなく 2 列のレイアウトになります。

ただし、ブラウザーの幅を最小化し続けると、4 つの列が返されるため、それらを表示する余地がないということはありません。

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 -->

最初の作業 今は機能していません

再び働く

4

1 に答える 1

14

問題が発生した理由についての質問に答えるには: 残念ながら、石積みとフレームワークの統合は、まったく異なる方法でイメージを制御しようとしているため、難しい場合があります (財団はサイズを変更したいのに対し、石積みは再配置したいのです)。この問題に対処する最善の方法は、ファンデーション コンテナーをメーソンリー コンテナーとして使用することです。内部の画像のサイズは変更されませんが、コンテナーの右側に表示されるぎこちない余白の問題を回避するために、コンテナーを中央に配置する際に流体コンテナー内で再配置されます。余分な列に画像を配置できない場合。

===更新===

使用したい場合は、この github リポジトリで、この更新 (5.0.2) の時点で最新の Foundation バージョンでコード ベースを更新しました。

于 2013-04-09T21:26:50.787 に答える