Jquery 砌体js-won'；t垂直排列图像

图像在水平方向正确对齐，但它们在垂直方向上间隔开。。看看这里，看看我的意思

我的分数如下（简化）：

var$container=$（'.portfolio container'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.break”，
列宽：429
});
});
.休息{
浮动：左；
宽度：429px；
利润率：10px 20px；
}
//从MySQL获取的内容//

我认为它的一部分是有效的，但正如你所看到的链接所提供的，它没有垂直移动元素。有人有什么建议吗

工作更新：

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

$（文档）.ready（函数（）{
var$container=$（'.portfolio container'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.break”，
列宽：429，
檐沟宽度：40//添加了檐沟以模拟边距
});
});
});

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

$(document).ready(function() {

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

});

砖石并没有在你的页面上运行，这就是为什么你的元素只是浮动的，而不是按照你期望的方式排列

编辑：

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

margin: 10px 20px;

从你的

.break

课程

以及在

$（文档）中包装砌石脚本。就绪

---

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

可能是左侧浮动的断点？@AndrewPeacock在砖石文档中说使用标记：

。项{宽度：220px；边距：10px；浮动：左侧；}

，这会阻止它一起工作，它们只是按照不使用砌体脚本的方式显示。我也很惊讶砖石工程并没有真正运行。。我如何启用它？他们目前正在以不使用砖石的方式显示。查看在控制台

$（“.portfolio container”）.mashise（{itemSelector:'.break'}）中运行以下命令时发生的情况

@iliachory显示

公文包容器

div，其内容位于console@user1449737你刚在链接的页面上更改了什么吗？它一秒钟前就成功了…@iliachory我只添加了JQuery的dom就绪代码3rror404

margin: 10px 20px;