0
Isotopeを勉強しようとしています。私が試している特定のデモがあり、与えられたコードをコピーしました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/[email protected]/dist/isotope.pkgd.js"></script>
<script type="text/javascript">
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100,
gutter: 20
}
});
</script>
</body>
</html>
あなたはcdnを正しく追加していません。すでにあなたのコードを編集しています。アップデートを確認してください –