试图让同位素砌体在我的网站上工作

Question

我正在尝试将 Isotope 合并到我正在编码的站点中，但无法使其按我预期的方式工作。目标是创建具有相对宽度（目前为 28%）和可变高度的内容框列，具体取决于框中的内容量。我希望盒子对齐成列，每个盒子都直接在上面的盒子下面，砖石风格。在正在构建的站点上测试我的代码没有产生任何结果，如下所示：http://bruggemann.us/ 所以我将我的代码复制到 codepen 中来尝试解决它，并得到了不同的结果，尽管仍然不是我正在寻找的结果。那是在 http://codepen.io/anon/pen/adGJmY 作为参考，我在我的代码中使用：

<script src="web/js/jquery-1.12.0.min.js"></script>
<script src="web/js/material.min.js"></script>
<script src="web/js/isotope.pkgd.min.js"></script>

我查看了文档并查看了其他代码笔示例，但找不到我可能遗漏的答案。非常感谢任何帮助。

Answer 1

简单地说，您在加载 imagesloaded.js 脚本之前加载了 imagesloaded 函数，并且您已经注释掉了 isotope 脚本，因此它永远不会被加载，所以您得到了错误。

你的代码是这样的：

<!-- jQuery -->
<script src="web/js/jquery-1.12.0.min.js"></script>

<!-- Code from file inserted below  <script src="web/js/isotope.pkgd.min.js">   </script>
-->
<script>
$(document).ready(function() {
    $('.contentblock').isotope({
        // options
        percentPosition: true,
        itemSelector: '.contentbox',
        masonry: {
            columnWidth: '.contentbox-sizer'
        }
    });
});
</script>
<script src="web/js/imagesloaded.pkgd.min.js"></script>

您需要在调用函数和取消注释同位素脚本之前添加 imagesloaded：

<!-- jQuery -->
<script src="web/js/jquery-1.12.0.min.js"></script>
<script src="web/js/imagesloaded.pkgd.min.js"></script>

<script src="web/js/isotope.pkgd.min.js">   </script>

<script>
$(document).ready(function() {
    $('.contentblock').isotope({
        // options
        percentPosition: true,
        itemSelector: '.contentbox',
        masonry: {
            columnWidth: '.contentbox-sizer'
        }
    });
});
</script>

试图让同位素砌体在我的网站上工作

Trying to get Isotope masonry working on my site

jquery

jquery-isotope