为什么这段代码在codepen中运行而不是在实际站点/小提琴中运行？

时间：2017-12-12 17:42:23

标签： javascript html css codepen

我要求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小提琴测试链接： https://jsfiddle.net/12szr1f9/2/

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

1 个答案:

答案 0 :(得分：1)

您需要在HTML中添加以下代码来包含代码所使用的库（Mason和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>

相关问题
最新问题