※ ChatGPTを利用し、要約された質問です（原文：masonry.jsで並べた画像を綺麗に敷き詰める）
masonry.jsで美しい画像レイアウトを実現
このQ&Aのポイント
masonry.jsを使用し、サイト全体に画像を美しく配置する方法についての質問です。
レイアウトやアニメーションに関する理解は進んでいるものの、masonry.jsの導入に悩んでいます。
具体的な記述の追加方法を教えてほしいというリクエストです。
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 */
お礼
ありがとうございます、ベストアンサーにさせて頂きました。