将jquery砌体集成到zurb基础网格中 [英] integrating jquery masonry into a zurb foundation grid

问题描述

我在将砌体与基金会网格布局集成时遇到问题.本质上，宽度相同的图像具有不同的高度，砖石可以按预期工作，但在某些断点处，网格仅具有两列布局，而不是通常的四列.

I'm having issues integrating masonry with a Foundation grid layout. Essentially with identical width images with varying height, the masonry works as expected but at certain breakpoints the grid only will have a two column layout as opposed to the usual four.

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

However if you keep minimizing the browser width, the four columns return so it can't be that there isn't the room to display them.

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

推荐答案

要回答有关为什么的问题，请参见: 不幸的是，由于将砌体和框架集成在一起可能很棘手，因为两者都试图以完全不同的方式来控制图像(Foundation要调整大小，而砌体要重新定位).解决此问题的最佳方法是使用基础容器作为砌体容器，其内部图像不会调整大小，但会在使容器居中时重新定位在流体容器中，以避免出现尴尬的边距问题当无法将图像放置在额外的列中时，将其放在容器的右侧.

To answer your question about why your issue is happening: Unfortunately since integrating masonry and frameworks can be tricky since both are attempting to control the image in completely different ways (Foundation wants to resize and masonry wants to reposition). The best way to tackle this issue is to use a foundation container as the masonry container, the images inside will not resize, but will reposition within the fluid container while centering the container to avoid awkward margin issues which appear on the right-side of containers when images cannot be placed into an extra column.

=== 更新 ===

在此更新(5.0.2)时，我在

I updated the code base with the most up-to-date Foundation version at the time of this update (5.0.2) in this github repository if you'd like to use it.

这篇关于将jquery砌体集成到zurb基础网格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！