与演示相比，同位素砌体产生不同的输出

Question

我正在努力学习Isotope . There's a particular demo that I'm trying and I've copied the code from the given fiddle here

但是，输出是不同的。

我的输出：
演示站点上的输出：

浏览器已最大化，我正在同一个屏幕上查看。这是我页面上的代码：

  <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
    * { box-sizing: border-box; }

    body { font-family: sans-serif; }

    /* ---- grid ---- */

    .grid {
        background: #DDD;
        max-width: 1200px;
    }

    /* clear fix */
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

    /* ---- .grid-item ---- */

    .grid-item {
        float: left;
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
        background: #0D8;
        border: 2px solid #333;
        border-color: hsla(0, 0%, 0%, 0.7);
    }

    .grid-item--width2 { width: 220px; }
    .grid-item--height2 { height: 220px; }

</style>

</head>
<body>
<h1>Isotope - masonry gutter, with margin bottom</h1>

<div class="grid">
    <div class="grid-item grid-item--width2"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--width2 grid-item--height2"></div>
    <div class="grid-item grid-item--width2"></div>
    <div class="grid-item grid-item--width2"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--width2"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/isotope-layout@3.0.1/dist/isotope.pkgd.js"></script>
<script type="text/javascript">


    $('.grid').isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 100,
            gutter: 20
        }
    });
</script>
</body>
</html>

Answer 1

Jquery 尚未插入。感谢@MostafaBaezid 的提示。

与演示相比，同位素砌体产生不同的输出

Isotope masonry produces different output compared to demo

javascript

jquery

html

css

jquery-isotope