MasonryとInfinite Scrollを使ったpinterest風サイトを作りたい

まずはこちらのサイトに目を通して頂けると助かります。
https://www.miso.blog/jquery-masonry-infinitescroll/
そして
https://www.miso.blog/demo/masonry_infinitescroll/
こんな感じのサイトを作りたいのですが、どうもグリッドレイアウトに関しては全くの素人で、
オマケにライブラリ、プラグインを使うのも苦手なのでコピー&ペーストだけしても、
どこに記述して設定すればいいのか解りません。
実際一回記述してみたのですが上手くいきません。
ご教示いただけるなら必要な情報は書いていくつもりです。
よろしくお願いします。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 21.0.5.0 for Windows">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script type="text/javascirpt" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script>
$(function(){
    var $grid = $('.grid');
    $grid.masonry({
        itemSelector: 'none',
        columnWidth: '.grid__item',
        gutter: 20,
        stagger: 30,
        percentPosition: true,
        visibleStyle: { transform: 'translateY(0)', opacity: 1 },
        hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
    });

    var msnry = $grid.data('masonry');

    $grid.imagesLoaded(function() {
        $grid.masonry( 'option', { itemSelector: '.grid__item' });
        var $items = $grid.find('.grid__item');
        $grid.masonry( 'appended', $items );
    });
    
    var nextSlugs = [
        'page2.html',
        'page3.html'
    ];
    
    function getPath() {
        var slug = nextSlugs[ this.loadCount ];
        if( slug ) {
            return 'https://www.miso.blog/demo/masonry_infinitescroll/';
        }
    }

    $grid.infiniteScroll({
        path: getPath,
        append: '.grid__item',
        outlayer: msnry,
        scrollThreshold: 40,
        hideNav: '.pagination',
        status: '.page-load-status',
    });
});
</script> <script>
//-------------------------------------//
// init Masonry

var $grid = $('.grid').masonry({
  itemSelector: 'none', // select none at first
  columnWidth: '.grid__col-sizer',
  gutter: '.grid__gutter-sizer',
  percentPosition: true,
  stagger: 30,
  // nicer reveal transition
  visibleStyle: { transform: 'translateY(0)', opacity: 1 },
  hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});

// get Masonry instance
var msnry = $grid.data('masonry');

// initial items reveal
$grid.imagesLoaded( function() {
  $grid.removeClass('are-images-unloaded');
  $grid.masonry( 'option', { itemSelector: '.grid__item' });
  var $items = $grid.find('.grid__item');
  $grid.masonry( 'appended', $items );
});

//-------------------------------------//
// hack CodePen to load pens as pages

var nextPenSlugs = [
  '202252c2f5f192688dada252913ccf13',
  'a308f05af22690139e9a2bc655bfe3ee',
  '6c9ff23039157ee37b3ab982245eef28',
];

function getPenPath() {
  var slug = nextPenSlugs[ this.loadCount ];
  if ( slug ) {
    return 'https://s.codepen.io/desandro/debug/' + slug;
  }
}

//-------------------------------------//
// init Infinte Scroll

$grid.infiniteScroll({
  path: getPenPath,
  append: '.grid__item',
  outlayer: msnry,
  status: '.page-load-status',
});
</script>
<title></title>
</head>
<body>
<h1>Infinite Scroll - Masonry image grid</h1>
<div class="grid are-images-loaded">
  <div class="grid__col-sizer"></div>
  <div class="grid__gutter-sizer"></div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item grid__item--width2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree"> </div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look out"> </div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--width2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg" alt="rasberries"> </div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height2"></div>
</div>
<div class="page-load-status">
  <div class="loader-ellips infinite-scroll-request"><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span></div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>
</body>
</html>

とりあえずはまずHTMLからお見せしました。
これを実行すると'masonry'プロパティまたはメソッドをサポートしていませんと出ます。
できたことは、画像がきちんと整列したわけじゃないですが、ランダムに出てきた事です。
因みにログはビルダーなのででてきません。

CSSの方の記述です、よろしくお願いします。

body {
  font-family: sans-serif;
  line-height: 1.4;
  font-size: 18px;
  padding: 20px;
  max-width: 640px;
  margin: 0 auto;
}

.grid {
  max-width: 1200px;
}

/* reveal grid after images loaded */
.grid.are-images-unloaded {
  opacity: 0;
}

.grid__item,
.grid__col-sizer {
  width: 32%;
}

.grid__gutter-sizer { width: 2%; }

/* hide by default */
.grid.are-images-unloaded .image-grid__item {
  opacity: 0;
}

.grid__item {
  margin-bottom: 20px;
  float: left;
}

.grid__item--height1 { height: 140px; background: #EA0; }
.grid__item--height2 { height: 220px; background: #C25; }
.grid__item--height3 { height: 300px; background: #19F; }

.grid__item--width2 { width: 66%; }

.grid__item img {
  display: block;
  max-width: 100%;
}


.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

/* loader ellips in separate pen CSS */

Lhankor_Mhy

2020/03/30 00:30

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2

行動規範の内容に同意します

回答1件

ベストアンサー

typoです。

html
1<script type="text/javascirpt" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

↓

html
1<script type="text/javascript" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

コメントを受けて追記

コードを見た感じ、おそらく、1つ目のスクリプトが重複しており必要ないように思えました。
そして、2つ目のスクリプトは、ロードイベントの処理がされていませんでした。1つ目と同様にロードイベント後に処理するようにした方がよいと思います。

つまり、以下のようにしてください。

HTML
1<script>
2$(function(){
3    var $grid = $('.grid');
4    $grid.masonry({
5        itemSelector: 'none',
6        columnWidth: '.grid__item',
7        gutter: 20,
8        stagger: 30,
9        percentPosition: true,
10        visibleStyle: { transform: 'translateY(0)', opacity: 1 },
11        hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
12    });
13
14    var msnry = $grid.data('masonry');
15
16    $grid.imagesLoaded(function() {
17        $grid.masonry( 'option', { itemSelector: '.grid__item' });
18        var $items = $grid.find('.grid__item');
19        $grid.masonry( 'appended', $items );
20    });
21
22    var nextSlugs = [
23        'page2.html',
24        'page3.html'
25    ];
26
27    function getPath() {
28        var slug = nextSlugs[ this.loadCount ];
29        if( slug ) {
30            return 'https://www.miso.blog/demo/masonry_infinitescroll/';
31        }
32    }
33
34    $grid.infiniteScroll({
35        path: getPath,
36        append: '.grid__item',
37        outlayer: msnry,
38        scrollThreshold: 40,
39        hideNav: '.pagination',
40        status: '.page-load-status',
41    });
42});
43</script>

を削除し、スクリプトを

js
1$(function(){
2});

で囲う。

投稿2020/03/30 04:18

編集2020/03/30 06:34

Lhankor_Mhy

総合スコア36074

syosinsya9999

2020/03/30 05:45

回答ありがとうございます、infinite-scrollの機能は動作しました、ありがとうございます。あとすみませんが、見本のサイトのように画像を横縦3列で同じサイズで表示させたいのですが、どこをどう直せばよいでしょうか？自分の実行画面だと横２列縦に何列も並びになってしまいます（ローカルサーバーだからなのか疑問です）良ければご教示お願いします。