プログラミング初心者です。
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
//-------------------------------------//
// 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で読み込むようにする事で実行が可能です。