Question

我正在尝试将masonry.js库安装到我的网站中。但无论我添加/删除什么，Masonry似乎都没有在网页上对齐任何内容。

这是我的代码：

<script>
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});
</script>

我的HTML / PHP

<div class="container">
   <div class="grid">
        <div id="row" >
                <?php foreach ($pages as $page): ?> 
                        <div class="col-md-4 col-sm-6">
                            <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="grid-item"><a href="<?php echo BASE_URL; ?>/page.php?page=<?php echo $page['slug']; ?>"><img alt="Article Image" class="img-responsive" src="<?php echo BASE_URL;?><?php echo $page['image']; ?>"></div>
                            </div>
                            </div>
                        </div>
                <?php endforeach; ?>
        </div>
  </div>
</div>

任何帮助都会非常感激，我已经阅读了几篇关于使用Bootstrap安装Masonry的文章，但无论我尝试什么，它仍然拒绝对齐 https://www.jetbrains.com/idea/help/general-guidelines.html

Answer 1

修改

<div class="grid">

要

<div class="grid js-masonry">

现在已经完成了这个伎俩。：）

砌体正确调用，但没有对齐网格

1 个答案: