将jquery砌体整合到zurb基础网格中

Question

我遇到了将砌体与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 -->

Answer 1

要回答有关为什么您的问题正在发生的问题： 不幸的是，因为整合砌体和框架可能会很棘手，因为两者都试图以完全不同的方式控制图像（基金会希望调整大小并且砌体想要重新定位）。解决此问题的最佳方法是使用基础容器作为砌体容器，内部图像不会调整大小，但会在使容器居中时重新定位在流体容器内，以避免出现难以处理的边缘问题当图像无法放入额外的列时，在容器的右侧。

=== 更新 ===

如果您想使用此更新（5.0.2），我会在this github repository中使用最新的基础版本更新代码库。