2

画像は水平方向に正しく配置されていますが、すべて垂直方向に間隔が空けられています.. ここを見てくださいhttp://brstudios.co.uk/testing正しく意味することを確認してください..

私のマークアップは次のとおりです（簡略化）：

<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>

<script type="text/javascript">
  var $container = $('.portfolio-container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector : '.break',
      columnWidth : 429
  });
});
</script>

<style type="text/css">
.break {
    float: left;
    width: 429px;
    margin: 10px 20px;
  }
</style>

</head>

<body>

<div class="portfolio-container">

<?php do { ?>

<div class="break">

// Contents taken from MySQL //

</div>

<?php } while ($row_displayPosts = mysql_fetch_assoc($displayPosts)); ?>

</div>

</body>

</html>

一部は機能していると思いますが、リンクからわかるように、要素を垂直方向に一緒に移動していません。誰にも指針がありますか？

作業中の更新:

  <script type="text/javascript">

    $(document).ready(function() {

        var $container = $('.portfolio-container');
          $container.imagesLoaded(function(){
            $container.masonry({
              itemSelector : '.break',
              columnWidth : 429,
              gutterWidth : 40      //Added gutter to simulate margin
          });
        });

    });
  </script>
4

1 に答える 1

2

スクリプトを JQuery の dom Ready にラップする必要があります。

$(document).ready(function() {

    var $container = $('.portfolio-container');
      $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector : '.break',
          columnWidth : 429
      });
    });

});

メーソンリーは実際にはページ上で実行されていません。そのため、要素が浮かんでいるだけで、期待どおりに配置されていません。

編集：

ページをダウンロードして遊んだ後、次のものも削除する必要があるようです。

margin: 10px 20px;

あなたの.breakクラスから

石積みスクリプトをラップするだけでなく、$(document).ready

あなたの余白が要素を横に並べて積み重ねるには広すぎると思われます

于 2012-07-09T20:56:41.473 に答える