16

当使用 bootstrap 3 和Desandro's Masonry时,我遇到了一个奇怪的问题,似乎一旦调用 Masonry,我的图像宽度就会增加 10px,导致砌体从所需的 3 列变为2(但仍然在 2 中正常工作)。我最好的猜测是,这一定与 Bootstrap 的新 .img-responsive 类有关。

这个问题可以在这里看到:http: //jsfiddle.net/68qxE/2/(一定要扩大结果的宽度),但如果你愿意:

这是我的 HTML:

<div class="container">
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/1"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/2"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/3"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/4"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/5"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" /></a>
  </div>
</div>

这是我的Javascript:

$(document).ready(function(){
  var $container = $('.container');

  $container.imagesLoaded( function() {
    $container.masonry({
      itemSelector        : '.post-box',
      columnWidth         : '.post-box',
      transitionDuration  : 0
    });
  });
});

这是我的CSS:

.img-thumbnail {
  padding: 10px;
}

.post-box {
  margin: 15px 0 15px 0;
}

现在,当页面最初加载时,在任何 javascript 发生之前,col-lg-4 的宽度为 350px。但是一旦调用了 javascript,col-lg-4 的宽度就会跳到 360px,我相信这是导致它从 3 列布局下降到 2 列布局的原因。

4

2 回答 2

9

答案在这里进一步讨论和解决:https ://github.com/desandro/masonry/issues/405

于 2013-10-24T23:23:19.377 回答
3

我不认为这是由 imagesLoaded 引起的。问题是.container.
你为什么不把它重置为0?

.container {
    padding: 0px;
}
于 2013-09-19T18:01:12.153 回答