プログラミング初心者です。
codepenにある下記サンプルと同じものを作成しようと試しにコピペしてみましたが、divが縦に1列にしか表示されません。
サンプル同様に3列にするためには、ライブラリか何かが必要なのでしょうか。
(そもそもコード自体がサンプル通りになるような完璧なものではないようですが)
環境
テキストエディタ:Sublime Text
ブラウザ:Chrome
ご教授いただければ幸いです。宜しくお願い致します。
プログラミング初心者です。
codepenにある下記サンプルと同じものを作成しようと試しにコピペしてみましたが、divが縦に1列にしか表示されません。
サンプル同様に3列にするためには、ライブラリか何かが必要なのでしょうか。
(そもそもコード自体がサンプル通りになるような完璧なものではないようですが)
環境
テキストエディタ:Sublime Text
ブラウザ:Chrome
ご教授いただければ幸いです。宜しくお願い致します。
必要なライブラリが読み込まれていない事が原因かと思います。
記載されたリンク先では下記を読み込んでおりますので、こちらを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
ローカルで実行したい場合にはライブラリの3つのファイルをローカルに保存して、
それらをindex.htmlで読み込むようにする事で実行が可能です。