为什么此代码在 codepen 中有效但在实际 site/fiddle 中无效？

Question

我正在从 Codepen 分叉此代码以在我的网站上使用，但我不确定为什么它在除 Codepen 以外的所有地方都出现问题。我也尝试在 JS Fiddle 上测试它，结果是一样的。请看：

(function ($) {
    'use strict';

 $(window).load(function(){

  $('.masonry').masonry({
   columnWidth: '.grid-sizer',
   gutter: '.gutter-sizer',
   itemSelector: '.item'
  });

 });
    
}(jQuery));

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: black;
}

@media (max-width: 480px) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media only screen and (max-width: xxspx) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .masonry {
    margin: 2.25% 0;
  }
  .masonry .grid-sizer {
    width: 31.83333%;
  }
  .masonry .gutter-sizer {
    width: 2.25%;
  }
  .masonry .item {
    width: 31.83333%;
    margin-bottom: 2.25%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .masonry {
    margin: 2% 0;
  }
  .masonry .grid-sizer {
    width: 23.5%;
  }
  .masonry .gutter-sizer {
    width: 2%;
  }
  .masonry .item {
    width: 23.5%;
    margin-bottom: 2%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .masonry {
    margin: 1.875% 0;
  }
  .masonry .grid-sizer {
    width: 18.5%;
  }
  .masonry .gutter-sizer {
    width: 1.875%;
  }
  .masonry .item {
    width: 18.5%;
    margin-bottom: 1.875%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .masonry {
    margin: 1.8% 0;
  }
  .masonry .grid-sizer {
    width: 15.16667%;
  }
  .masonry .gutter-sizer {
    width: 1.8%;
  }
  .masonry .item {
    width: 15.16667%;
    margin-bottom: 1.8%;
  }
  .masonry .item img {
    width: 100%;
  }
}

<div class="masonry">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
</div>

请查看 Codepen 上的原始来源：https://codepen.io/jdlaplan/pen/Aowpj

JS Fiddle 测试 Link: https://jsfiddle.net/12szr1f9/2/

注意：我在这里展示了编译后的 CSS，而 Codepen 源代码使用 SCSS 预处理器。

Answer 1

您需要通过在 HTML 中添加以下代码来包含您的代码正在使用的库（Masonry 和 jQuery）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>

你的 CodePen 有这些库，而 jsfiddle 和原始网站没有。这导致了问题！

(function ($) {
    'use strict';

 $(window).load(function(){

  $('.masonry').masonry({
   columnWidth: '.grid-sizer',
   gutter: '.gutter-sizer',
   itemSelector: '.item'
  });

 });
    
}(jQuery));

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: black;
}

@media (max-width: 480px) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media only screen and (max-width: xxspx) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .masonry {
    margin: 2.25% 0;
  }
  .masonry .grid-sizer {
    width: 31.83333%;
  }
  .masonry .gutter-sizer {
    width: 2.25%;
  }
  .masonry .item {
    width: 31.83333%;
    margin-bottom: 2.25%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .masonry {
    margin: 2% 0;
  }
  .masonry .grid-sizer {
    width: 23.5%;
  }
  .masonry .gutter-sizer {
    width: 2%;
  }
  .masonry .item {
    width: 23.5%;
    margin-bottom: 2%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .masonry {
    margin: 1.875% 0;
  }
  .masonry .grid-sizer {
    width: 18.5%;
  }
  .masonry .gutter-sizer {
    width: 1.875%;
  }
  .masonry .item {
    width: 18.5%;
    margin-bottom: 1.875%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .masonry {
    margin: 1.8% 0;
  }
  .masonry .grid-sizer {
    width: 15.16667%;
  }
  .masonry .gutter-sizer {
    width: 1.8%;
  }
  .masonry .item {
    width: 15.16667%;
    margin-bottom: 1.8%;
  }
  .masonry .item img {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="masonry">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
</div>

为什么此代码在 codepen 中有效但在实际 site/fiddle 中无效？

Why is this code working in codepen but not actual site/fiddle?

html

javascript

css

codepen