Question

图像正确水平对齐，但它们都是垂直间隔的。看看这里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>

Answer 1

您需要将脚本包装在JQuery的dom中：

$(document).ready(function() {

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

});

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

编辑：

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

margin: 10px 20px;

来自.break班级

与在$(document).ready

中包裹砌体脚本一样好

我怀疑你的边距太宽，不能并排堆叠

砌体js不会垂直聚集图像

1 个答案: