砌体不起作用（但在www.jsfiddle.net上完美运作）

Question

正如标题所说，我正在我的wordpress网站的某些部分实施砌体。

您可以查看here并找到下图：

在上图中，这是我尝试实施砌体的地方。

这里的砖石编码：

Fiddle

＆＃13;

＆＃13;

$(window).load(function(){
	$('.tentofifteen').masonry({
	  // options
	  itemSelector: '.grid-item',
	  columnWidth: 1,
	});
});

＆＃13;

.grid-item {
    float: left;
}

.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class="tentofifteen">
    <section class="grid-superloop-ten grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-eleven grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-twelve grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-thirteen grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-fourteen grid-item" id="wired-superloop">
    </section>
</div>

＆＃13;

＆＃13;

＆＃13;

它运作正常吗？

问题是，当我开始将jsfiddle中相同的确切代码复制到dreamweaver时，什么也没发生。怎么了？我错过了什么吗？

Answer 1

在您发布的代码中，您正在装载两次砌体。 在您的网站上，您在jQuery之前加载了砌体，但是使用jQuery函数调用它，因此您需要加载这样的脚本而不是它们当前的方式。

<script src="https://code.jquery.com/jquery-2.1.3.js" type="text/javascript" language="javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js" type="text/javascript"></script>

BTW，您的网站正在加载2个版本的jQuery，1.11.3和2.1.3。你只需加载一个。