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

$(document).ready(function() {

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

});

Masonry 实际上并没有在您的页面上运行，这就是为什么您的元素只是浮动而不是按照您期望的方式排列的原因。

编辑：

下载您的页面并使用它后，您似乎还需要删除：

margin: 10px 20px;

从你的.break班级

以及将砌体脚本包装在$(document).ready

我怀疑您的边距使元素太宽而无法并排堆叠

于 2012-07-09T20:56:41.473 回答