8

我在将砌体与 Foundation 网格布局集成时遇到问题。基本上对于具有不同高度的相同宽度的图像，砌体按预期工作，但在某些断点处，网格将只有两列布局，而不是通常的四列布局。

但是，如果您继续最小化浏览器宽度，则四列会返回，因此不可能没有空间来显示它们。

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 存储库中使用本次更新时最新的 Foundation 版本 (5.0.2) 更新了代码库。

于 2013-04-09T21:26:50.787 回答