16

ブートストラップ 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 に答える