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>

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

Answer 1

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

您的代码是：

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

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

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

试图让Isotope砌体在我的网站上运行

1 个答案: