Question

目标
要有一个功能“pinterest样式”布局。

enter image description here

背景
我以前用Masonry创建了一个博客概念，布局非常流畅。为了说明它应该如何运作，我发布了This video on youtube

我的original conceptual demo on codepen使用了基金会5.

然后我分叉了broken demo in question - on codepen。

但如果我删除Foundation 5，它就不起作用。但这很奇怪，因为HTML中没有任何基础类。

问题
这根本不应该依赖于Foundation 5.当我删除外部Foundation 5文件时，容器会浮动到任何一侧。

enter image description here

即使浏览器窗口可以容纳更多内容，布局也会逐列到单个项目。

enter image description here

当前状态

它有效，但不应该依赖基金会。

代码

HTML

<div id="gallery-content" class="clearfix">

  <!-- Case 1 -->  
    <div class="case-box item">
      <img src="http://ships.bouwman.com/Planes/Boeing---X-48B.jpg" />
      <div class="case-country country-us"></div>

      <div class="case-description">
        <p>Boeing Blended Wing X-48B</p>
      </div>

      <div class="case-options">
        <a href="#">Details<i class="fa fa-arrows-alt"></i></a>
      </div>
    </div> 

    <!-- many more containers then closed off by #gallery-content div -->

CSS

基金会5的CSS来自CDNJS。

//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css

我写的这段代码

#gallery-content {
  width: auto;
  margin: 0 auto;
}

.item {
  display: block;
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
  -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}

.item img { width: 300px; height: auto; }

.case-box {
  border: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

.case-box {
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

的JavaScript

的jQuery

来自CDNJS的砌体

//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js

这段代码

$(document).ready(function() {

  // Initialize Masonry
  $('#gallery-content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
      $(this).masonry('reload');
    });
  });

直播链接：
http://codepen.io/JGallardo/pen/BuCbn。

Answer 1

使您的演示按预期工作的特定Foundation CSS是：

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

如果没有这个规则，你的项目会宽2像素，因为它们的边框被包含在盒子模型计算中，我希望这会破坏布局。

以下是笔的一个分叉，删除了基础：http://codepen.io/anon/pen/nkmgJ

Answer 2

我接受了乔纳森的回答，因为他在技术上回答了我原来的问题。

然而，真正的问题不在于MasonryJS，也没有基金会提供真正的解决方案。 foundation.css 提供补救措施的原因是由于border: #888 1px solid;所需的框大小调整重置。

在Paul Irish的一篇文章中，他讨论了如何用

来解决这个问题

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

完整帖子位于：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

当然，9以下的Internet Explorer版本存在问题。您可以在box-sizing: border-box => for IE8?

了解详情。

Chris Coyer在http://css-tricks.com/box-sizing/更深入地讨论了盒子大小。

但是，在不依赖此重置的情况下保持兼容性的最简单方法是使用大纲而不是边框。您可以在Difference between outline and border了解更多相关信息。

因此，在我自己的项目中，我添加了重置。我还确保从

更改我的代码

.case-box {
  border: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

到

.case-box {
  outline: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

使用masonry.js打破布局，但在添加Foundation 5时有效

2 个答案: