53277


プログラミング初心者です。

codepenにある下記サンプルと同じものを作成しようと試しにコピペしてみましたが、divが縦に1列にしか表示されません。

[Infinite Scroll - Colcade](https://codepen.io/desandro/pen/WmeqWg)

サンプル同様に３列にするためには、ライブラリか何かが必要なのでしょうか。

（そもそもコード自体がサンプル通りになるような完璧なものではないようですが）

環境  
テキストエディタ：Sublime Text  
ブラウザ：Chrome

ご教授いただければ幸いです。宜しくお願い致します。


CC BY-SA 4.0
2019-03-06T15:12:19.913
53250
2019-12-13T20:10:30.773
2019-03-06T15:18:34.463
3060
31552
question
javascript css
codepenにあるサンプルと同じレイアウトにする方法


必要なライブラリが読み込まれていない事が原因かと思います。  
記載されたリンク先では下記を読み込んでおりますので、こちらをJavaScriptのコードより前に読み込む必要があります。

<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js>  
<https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js>  
<https://unpkg.com/colcade@0/colcade.js>

* * *

実際にサーバ上で動作させる方法を記載します。

「index.html」、「a.css」、「b.js」として、リンク先のHTML、CSS、JavaScript欄？に記載されているコードをコピーします。  
そして、ローカルの同フォルダに保存します。

index.htmlの先頭に↓を記載します。

[code]

    <link rel="stylesheet" media="all" href="./a.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
    <script src="https://unpkg.com/colcade@0/colcade.js"></script>
    <script src="./b.js"></script>
    
[/code]

どこかのサーバにアップして、index.htmlにアクセスすれば確認可能です。  
（cdnはローカルファイルから読み込めないため）

↓で確認できます。  
<https://jsbin.com/ficalolelu/edit?html,css,js,output>

[code]

    //-------------------------------------//
    // init Colcade
    
    var $grid = $('.grid').colcade({
      columns: '.grid__column',
      items: '.grid__item',
    });
    
    //-------------------------------------//
    // 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
    
    // add items for first column
    // colcade will move items into other columns
    var $firstColumn = $grid.find('.grid__column').eq(0);
    $firstColumn.infiniteScroll({
      path: getPenPath,
      append: '.grid__item',
      status: '.page-load-status',
    });
    
    // append items with colcade on append
    $firstColumn.on('append.infiniteScroll', function(event, response, path, items) {
      $grid.colcade('append', items);
    });
[/code]

[code]

    body {
      font-family: sans-serif;
      line-height: 1.4;
      font-size: 18px;
      padding: 20px;
      max-width: 640px;
      margin: 0 auto;
    }
    
    .grid {
      max-width: 1200px;
    }
    
    .grid:after {
      display: block;
      content: '';
      clear: both;
    }
    
    .grid__column {
      float: left;
      width: 32%;
      margin-left: 2%;
    }
    
    .grid__column:first-child {
      margin-left: 0
    }
    
    .grid__item {
      display: block;
      width: 100%;
      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 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 */
[/code]

[code]

    <link rel="stylesheet" media="all" href="./a.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
    <script src="https://unpkg.com/colcade@0/colcade.js"></script>
    <script src="./b.js"></script>
    
    
    
    
    
    
    <h1>Infinite Scroll - Colcade</h1>
    
    <div class="grid">
      <div class="grid__column">
        <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/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">
          <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="grid__column"></div>
      <div class="grid__column"></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>
[/code]

* * *

ローカルで実行したい場合にはライブラリの3つのファイルをローカルに保存して、  
それらをindex.htmlで読み込むようにする事で実行が可能です。


CC BY-SA 4.0
2019-03-07T09:54:09.117
53277
2019-12-13T20:10:30.773
2019-12-13T20:10:30.773
32986
13022
53250
answer