0

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

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

Infinite Scroll - Colcade

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

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

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

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

1
  • 具体的にご自身でコピペしたHTML+CSS+JSを提示いただくことは可能でしょうか?またリンク先のCodePenに設定してあるように、ご利用のライブラリ(jQueryやinfinite-scroll)などの情報もいただけるとより回答が得られやすいと思います
    – keitaro_so
    Commented 2019年3月7日 0:50

1 件の回答 1

2

必要なライブラリが読み込まれていない事が原因かと思います。
記載されたリンク先では下記を読み込んでおりますので、こちらを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の先頭に↓を記載します。

<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>

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

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

//-------------------------------------//
// 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);
});
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 */
<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>


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

1
  • ライブラリが読み込まれていないことが原因でした。 おかげさまで問題解決しました、ありがとうございます。
    – NPOP
    Commented 2019年3月24日 5:04

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。