masonry.jsで並べた画像を綺麗に敷き詰める
こんにちは、お世話になります。
大分レイアウト、アニメーションのjsの仕組みを理解してきたんですが
masonry.jsはまだちょっと解りません。
これを使ってサイトいっぱいに画像を敷き詰めるにはどのような記述を追加すればよいでしょうか？
ご教示お願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
$(function(){
var $grid = $('.grid').masonry({
// options
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>
</head>
<body>
<h1>Infinite Scroll - Masonry image grid</h1>
<ul class="grid">
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li>
<li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li>
</ul>
<div class="page-load-status">
<p class="infinite-scroll-request">
<i class="fa fa-spinner fa-spin"></i>Loading...
</p>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
<div class="pagination">
<a href="page2.html" class="pagination__next">もっと見る</a>
</div>
</body>
</html>
CSS---------------------------------------------------------------------------
@charset "utf-8";
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: 27%;
}
.grid__gutter-sizer { width: 2%; }
/* hide by default */
.grid.are-images-unloaded .image-grid__item {
opacity: 0;
}
.grid__item {
margin-bottom: 20px;
float: center;
}
.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: 400px; }
.grid__item img {
display: block;
max-width: 100%;
}
.page-load-status {
display: none; /* hidden by default */
お礼
なるほど、不要な要素はスペースだったんですね。 構文チェックなど引っかからなかったんでHTML側だとは思いもしなかったです。 askaaskaさんご丁寧にありがとうございました！