Web Design Leaves

.masonry {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  grid-auto-rows: 300px; /* 自動的に生成される行の高さを指定 */
}

.masonry {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  grid-auto-rows: 100px; /* 自動的に生成される行の高さ（基準となる行の高さ） */
}
	
.span3 {
   grid-row-end: span 3; /* 3つの行にまたがる→300px */
}
.span4 {
   grid-row-end: span 4; /* 4つの行にまたがる→400px */
}
.span5 {
   grid-row-end: span 5; /* 5つの行にまたがる→500px */
}

<div class="masonry-wrapper">
  <div class="masonry">
    <div class="masonry-item span3"><!-- .span3 を指定して高さを300pxに -->
      <div class="masonry-content"> <img class="thumb" src="images/01.jpg" alt="sample image">
        <h3 class="title">Title 1</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="masonry-item span5"><!-- .span5 を指定して高さを500pxに -->
      <div class="masonry-content"> <img class="thumb" src="images/02.jpg" alt="sample image">
        <h3 class="title">Title 2</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. </p>
        </div>
      </div>
    </div>
    <div class="masonry-item span4"><!-- .span4 を指定して高さを400pxに -->
      <div class="masonry-content"> <img class="thumb" src="images/03.jpg" alt="sample image">
        <h3 class="title">Title 3</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    
    ・・・中略・・・
				
    <div class="masonry-item span4">
      <div class="masonry-content"> <img class="thumb" src="images/12.jpg" alt="sample image">
        <h3 class="title">Title 12</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. </p>
        </div>
      </div>
    </div>
  </div>
</div>

.masonry {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  grid-auto-rows: 10px;
}
.landscape {
  grid-row-end: span 10;
}
.square {
  grid-row-end: span 14;
}
.portrait {
  grid-row-end: span 18;
}

<div class="masonry-wrapper">
  <div class="masonry">
    <div class="masonry-item landscape">
      <div class="masonry-content"> <img class="thumb" src="images/01.jpg" alt="sample image"> </div>
    </div>
    <div class="masonry-item portrait">
      <div class="masonry-content"> <img class="thumb" src="images/02.jpg" alt="sample image"> </div>
    </div>
    <div class="masonry-item square">
      <div class="masonry-content"> <img class="thumb" src="images/03.jpg" alt="sample image"> </div>
    </div>
        
    ・・・中略・・・
				
    <div class="masonry-item landscape">
      <div class="masonry-content"> <img class="thumb" src="images/12.jpg" alt="sample image"> </div>
    </div>
  </div>
</div>

<div class="masonry-wrapper">
  <div class="masonry">
    <div class="masonry-item">
      <div class="masonry-content"> <img class="thumb" src="images/01.jpg" alt="sample image">
        <h3 class="title">Title 1</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    ・・・中略・・・
    <div class="masonry-item">
      <!-- loading="lazy" を指定 -->
      <div class="masonry-content"> <img loading="lazy" class="thumb" src="images/07.jpg" alt="sample image">
        <h3 class="title">Title 7</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    ・・・中略・・・
    <div class="masonry-item">
      <div class="masonry-content"> <img loading="lazy" class="thumb" src="images/12.jpg" alt="sample image">
        <h3 class="title">Title 12</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. </p>
        </div>
      </div>
    </div>
  </div>
</div>

imagesLoaded( elem, callback )

imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images in #container are loaded');
});

<!-- imagesLoaded の読み込み -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>  
<script>

const grid = document.getElementsByClassName('masonry')[0];
const allItems = document.getElementsByClassName('masonry-item');
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
		
const resizeGridItem = (item) => {
  const rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = 'span ' + rowSpan;
}

const resizeAllGridItems = () => {
  for( let i=0; i < allItems.length; i++){
    resizeGridItem(allItems[i]);
  }
}

let timer = false;           
window.addEventListener('resize', () => {
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    resizeAllGridItems();
  }, 200);
});
	
/* この部分を下記の imagesLoaded を使った記述に変更
window.addEventListener('load', () => {
  resizeAllGridItems();
});
*/
	
window.addEventListener('load', () => {
  for(i=0; i<allItems.length; i++){
    //個々のアイテムの画像の読み込みを検出
    imagesLoaded( allItems[i], (instance) => {
      //item には個々のアイテムが入る
      const item = instance.elements[0];
      resizeGridItem(item);
    });
  }
}); 
</script> 

const grid = document.getElementsByClassName('masonry')[0];
const allItems = document.getElementsByClassName('masonry-item');
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));

const resizeGridItem = (item) => {
  const rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = 'span ' + rowSpan;
}

const resizeAllGridItems = () => {
  for(i=0; i<allItems.length; i++){
    //毎回画像の読み込みの検出を行ってからアイテムの grid-row-end プロパティを更新
    imagesLoaded( allItems[i], (instance) => {
      const item = instance.elements[0];
      resizeGridItem(item);
    });
  }
}

let timer = false;           
window.addEventListener('resize', () => {
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    resizeAllGridItems();
  }, 200);
});
	
window.addEventListener('load', () => {
  resizeAllGridItems();
});

/* グリッドアイテム（masonry-item）にアニメーションを追加 */
.masonry-item:nth-child(odd) { /* 奇数番目のアイテム */
  animation: start_animation1 0.4s ease-in-out both;
}
.masonry-item:nth-child(even) { /* 偶数番目のアイテム */
  animation: start_animation2 0.4s ease-in-out both;
}
  
@keyframes start_animation1 {
  0% {
  transform: translate(50px, 300px); 
  opacity: 0;
  }
  100% {
  transform: translate(0, 0);
  opacity: 1;
  }
}
  
@keyframes start_animation2 {
  0% {
  transform: translate(-50px, 300px);
  opacity: 0;
  }
  100% {
  transform: translate(0, 0);
  opacity: 1;
  }
}

<div class="masonry-wrapper">
  <div class="masonry">
    <div class="masonry-item">
      <img class="masonry-content" src="images/01.jpg" alt="sample image">
    </div>
    <div class="masonry-item">
      <img class="masonry-content" src="images/02.jpg" alt="sample image">
    </div>
    
    ・・・中略・・・

    <div class="masonry-item">
      <img loading="lazy" class="masonry-content" src="images/23.jpg" alt="sample image">
    </div>
    <div class="masonry-item">
      <img loading="lazy" class="masonry-content" src="images/24.jpg" alt="sample image">
    </div>
  </div>
</div>
	
<!--	imagesLoaded の読み込み -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> 
<script>

const grid = document.getElementsByClassName('masonry')[0];
const allItems = document.getElementsByClassName('masonry-item');
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
	
const resizeGridItem = (item) => {
  const rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = 'span ' + rowSpan;
}

const resizeAllGridItems = () => {
  for( let i=0; i < allItems.length; i++){
    resizeGridItem(allItems[i]);
  }
}
 
let timer = false;           
window.addEventListener('resize', () => {
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    resizeAllGridItems();
  }, 200);
});
	
window.addEventListener('load', () => {
  for(i=0; i<allItems.length; i++){
    imagesLoaded( allItems[i], (instance) => {
      const item = instance.elements[0];
      resizeGridItem(item);
    });
  }
});
</script>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  vertical-align: middle;
}
.masonry-wrapper {
  padding: 1.5rem;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
.masonry {
  display: grid;
  gap: 10px;  /* grid-auto-rows が 0 の場合、ギャップに 0 は指定できない */
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  grid-auto-rows: 0; /* 0 を指定 */
}
.masonry-item {
  background-color: pink;
}
.masonry-content {
  max-width: 100%;
}

.masonry-content {
  max-width: 100%;
  width: 100%;
  object-fit: cover; /* object-fit を指定 */
}

const grid = document.getElementsByClassName('masonry')[0];
const allItems = document.getElementsByClassName('masonry-item');
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
	
const resizeGridItem = (item) => {
  const rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = 'span ' + rowSpan;
  //環境に合わせて変更する値
  const magicNumber = 0.7; 
  //アイテムの高さ（ギャップの値を調整）
  const itemHeight = item.querySelector('.masonry-content').getBoundingClientRect().height + rowGap * magicNumber;
  //画像要素
  const image = item.querySelector('img');
  //画像要素の高さをアイテムの高さ（itemHeight）に設定
  image.style.height = itemHeight + 'px';
}

const resizeAllGridItems = () => {
  for( let i=0; i < allItems.length; i++){
    resizeGridItem(allItems[i]);
  }
}
 
let timer = false;           
window.addEventListener('resize', () => {
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    resizeAllGridItems();
  }, 200);
});
	
window.addEventListener('load', () => {
  for(i=0; i<allItems.length; i++){
    imagesLoaded( allItems[i], (instance) => {
      const item = instance.elements[0];
      resizeGridItem(item);
    });
  }
});

.masonry {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  grid-auto-rows: 10px;
}
.colx2 {
  grid-column-end: span 2; /* 列幅を2倍に */
}

<div class="masonry-item colx2"><!-- colx2 を指定 -->
  <div class="masonry-content"> 
    <img class="thumb" src="images/04.jpg" alt="sample image">
    <h3 class="title">Title 4</h3>
    <div class="desc">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

.masonry {
  display: grid;
  gap: 1px;  
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  grid-auto-rows: 0;
  grid-auto-flow: dense; /* dense を指定 */
}

<div class="masonry-wrapper">
  <div class="masonry">
    <div class="masonry-item">
      <img class="masonry-content" src="images/01.jpg" alt="sample image">
    </div>
    <div class="masonry-item">
      <img class="masonry-content" src="images/02.jpg" alt="sample image">
    </div>
    
    ・・・中略・・・
    
    <div class="masonry-item">
      <img class="masonry-content" src="images/22.jpg" alt="sample image">
    </div>
    <div class="masonry-item">
      <img class="masonry-content" src="images/23.jpg" alt="sample image">
    </div>
    <div class="masonry-item">
      <img class="masonry-content" src="images/24.jpg" alt="sample image">
    </div>
  </div>
</div>

.masonry-wrapper {
  padding: 1.5em;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
.masonry {
  column-gap: 10px; /* 変更 */
}
.masonry-item {
  margin-bottom: 0; /* 変更 */
  display: inline-block;
  vertical-align: top;
}
	
@media only screen and (min-width: 460px)  {
  .masonry {
   column-count: 2;
  }
}

@media only screen and (min-width: 768px) {
  .masonry {
   column-count: 3;
  }
}

@media only screen and (min-width: 1024px) {
  .masonry {
   column-count: 4;
  }
}
	
@media only screen and (min-width: 1240px) {
  .masonry {
   column-count: 5;
  }
}
.masonry-item {
  background-color: #efefef;
}
.masonry-content {  /* 追加 */
  max-width: 100%; /* img 要素 */
}

.masonry-item {
  width: 49%; /* 幅をパーセントで指定（列間のギャップが不要な場合は 50%） */
  margin-bottom: 10px;
  background-color: #efefef;
}

/* メディアクエリで画面幅に応じてカラムの幅を指定 */
@media screen and (min-width: 768px) {
  .masonry-item {
    width: 32%;  /* 列間のギャップが不要な場合は 33.333% */
  }
}
@media screen and (min-width: 962px) {
  .masonry-item {
    width: 24%;  /* 列間のギャップが不要な場合は 25% */
  }
} 
@media screen and (min-width: 1200px) {
  .masonry-item {
    width: 19%;   /* 列間のギャップが不要な場合は 20% */
  }
}

<script src="src/imagesloaded.pkgd.min.js"></script> 
<script src="src/masonry.pkgd.min.js"></script> 
<script>
  const elem = document.querySelector('.masonry');
  //画像を全て読み込んだら Masonry を初期化
  imagesLoaded( elem, () => {
      const msnry = new Masonry( elem, {
      // オプション
      columnWidth: '.masonry-item', // 列幅にグリッドアイテムの要素を指定
      itemSelector: '.masonry-item',
      gutter: 10,
      percentPosition: true // パーセントを使った配置を有効に
    });
  });
  
  /* または以下でもほぼ同じ
  const msnry = new Masonry( elem, {
    // オプション
    columnWidth: '.masonry-item',
    itemSelector: '.masonry-item',
    gutter: 10,
    percentPosition: true
  });
  imagesLoaded( elem ).on( 'progress', () => {
    // それぞれの画像が読み込まれたら Masonry レイアウトを実行
    msnry.layout();
  });
  */
</script>

const elem = document.querySelector('.masonry');
imagesLoaded( elem, () => {
    const msnry = new Masonry( elem, {
    columnWidth: '.masonry-item',
    itemSelector: '.masonry-item',
    gutter: 10,
    //水平方向の左から右の順序をできるだけ維持
    horizontalOrder: true,
    percentPosition: true
  });
});

.masonry-item {
  width: 90%; 
  margin-bottom: 10px;
  background-color: #efefef;
}
  
@media screen and (min-width: 480px) {
  .masonry-item {
    width: 49%;
  }
}
@media screen and (min-width: 768px) {
  .masonry-item {
    width: 32%; 
  }
}
@media screen and (min-width: 962px) {
  .masonry-item {
    width: 24%; 
  }
} 
@media screen and (min-width: 1200px) {
  .masonry-item {
    width: 19%; 
  }
}

const elem = document.querySelector('.masonry');
//オプションを別途定義
var masonryOptions = {
  columnWidth: '.masonry-item',
  itemSelector: '.masonry-item',
  gutter: 10,
  percentPosition: true
};
//基準となる最低幅
const min_width = 480;
//プラグインがアクティブかどうか
let isActive = false;
//プラグイン Masonry のインスタンスを代入する変数
let msnry = null;

//画面幅が 480px 以上であればプラグインを初期化
if(window.innerWidth >= min_width) {
  msnry = new Masonry( elem, masonryOptions);
  imagesLoaded( elem ).on( 'progress', () => {
    msnry.layout();
    isActive = true; //プラグインはアクティブ  
  });  
}

//画面幅によりプラグインを無効化または有効化する関数
const update_masonry = () => {
  // 表示領域の横幅
  const windowWidth = window.innerWidth; 
  // プラグインがアクティブで画面幅が 480px 未満の場合 
  if ( isActive && windowWidth < min_width ) {
    msnry.destroy();
    isActive = false;
  } else {
    // プラグインがアクティブでない場合
    if(!isActive) {
      msnry = new Masonry( elem, masonryOptions);
      msnry.layout();
      isActive = true;
    }
  } 
}

//リサイズ時の処理
let timer = false;
window.addEventListener('resize', () => {
  if (timer !== false) {
    clearTimeout(timer);
  }
  //リサイズ操作が終了した時点で処理を実行
  timer = setTimeout( () => {
    update_masonry();
  }, 200);
});

<div class="masonry-wrapper">
  <div class="masonry">
    <div class="masonry-item">
      <img class="thumb" src="images/01.jpg" alt="sample image">
    </div>
    <div class="masonry-item">
      <img class="thumb" src="images/02.jpg" alt="sample image">
    </div>
    
    ・・・中略・・・
    
    <div class="masonry-item">
      <img class="thumb" src="images/24.jpg" alt="sample image">
    </div>
  </div>
</div>

.masonry-item {
  margin-bottom: 10px; /* 行間のギャップ */
  width: 200px; /* 固定幅を指定 */
  padding: 10px;
  border: 1px solid #eee; 
}
.colx2 { 
  width: 410px; /* 2倍の幅 */
}

//グリッドコンテナの要素
const elem = document.querySelector('.masonry');
//画像を全て読み込んだら Masonry を初期化
imagesLoaded( elem, () => {
  const msnry = new Masonry( elem, {
    // オプション
    itemSelector: '.masonry-item',  //グリッドアイテムの対象にするセレクタ
    columnWidth: 200, //カラム幅（固定幅）
    gutter: 10, //列間のギャップ
    fitWidth: true,  //有効にするとコンテナを中央寄せ
  });
});

<div class="masonry-item colx2">
  <img class="thumb" src="images/sample-03.jpg" alt="sample image">
</div>

<div class="masonry-wrapper">
  <div class="filter_wrapper"><!-- フィルタ用のマークアップ -->
    <input type="radio" id="all" name="categories" value="all" checked>
    <input type="radio" id="city" name="categories" value="city">
    <input type="radio" id="nature" name="categories" value="nature">
    <input type="radio" id="museum" name="categories" value="museum">
    <input type="radio" id="travel" name="categories" value="travel">
    <ol class="filters">
      <li><label for="all">All</label></li>
      <li><label for="city">City</label></li>
      <li><label for="nature">Nature</label></li>
      <li><label for="museum">Museum</label></li>
      <li><label for="travel">Travel</label></li>
    </ol>
  </div><!-- フィルタ用のマークアップ（ここまで） -->
  <div class="masonry">
    <!-- グリッドアイテム に data-category 属性を追加 -->
    <div class="masonry-item" data-category="city museum">
      <div class="masonry-content"> <img class="thumb" src="images/01.jpg" alt="sample image">
        <h3 class="title">Title 1</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="masonry-item" data-category="travel">
      <div class="masonry-content"> <img class="thumb" src="images/02.jpg" alt="sample image">
        <h3 class="title">Title 2</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. </p>
        </div>
      </div>
    </div>
    
    ・・・中略・・・
    
    <div class="masonry-item" data-category="travel">
      <div class="masonry-content"> <img loading="lazy" class="thumb" src="images/12.jpg" alt="sample image">
        <h3 class="title">Title 12</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. </p>
        </div>
      </div>
    </div>
  </div>
</div>

/* Masonry レイアウト */
.masonry-wrapper {
  padding: 1.5rem;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
.masonry {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
  grid-auto-rows: 10px;
}
.masonry-item {
  background-color: #efefef;
}
.thumb {
  max-width: 100%;
}
.title {
  font-size: 16px;
  color: #999;
  text-align: center;
}
.desc {
  padding: 0 1rem;
  position: relative;
  overflow: visible;
  color: #aaa;
  font-size: 14px;
}
 
/* フィルタリング用スタイル */
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.filters {
  text-align: center;
  margin-bottom: 2rem;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.5s;
  color: #333;
  background-color: #fff;
  border: 1px solid #333;
}
.filters label:hover {
  background-color: #222;
  color: #fff;
}
[value="all"]:checked ~ .filters [for="all"],
[value="city"]:checked ~ .filters [for="city"],
[value="nature"]:checked ~ .filters [for="nature"], 
[value="museum"]:checked ~ .filters [for="museum"], 
[value="travel"]:checked ~ .filters [for="travel"] {
  background: #222;
  color: #fff;
}

<!-- imagesLoaded の読み込み -->
<script src="src/imagesloaded.pkgd.min.js"></script> 
<script>

const grid = document.getElementsByClassName('masonry')[0];
const allItems = document.getElementsByClassName('masonry-item');
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
 
const resizeGridItem = (item) => {
  const rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = 'span ' + rowSpan;
}
 
const resizeAllGridItems = () => {
  for(i=0; i<allItems.length; i++){
    //毎回画像の読み込みの検出を行ってからアイテムの grid-row-end プロパティを更新
    imagesLoaded( allItems[i], (instance) => {
      const item = instance.elements[0];
      resizeGridItem(item);
    });
  }
}
 
let timer = false;           
window.addEventListener('resize', () => {
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    resizeAllGridItems();
  }, 200);
});
	
window.addEventListener('load', () => {
  resizeAllGridItems();
});
 
//フィルタリング
window.addEventListener('DOMContentLoaded', () => {
  //name 属性が categories の input 要素（ラジオボタン）の集まり（静的な NodeList）を取得
  const input_categories = document.querySelectorAll("input[name=categories]");
  //フィルタのターゲットにグリッドアイテムの要素を指定
  const targetElements = '.masonry-item';  
  //全てのグリッドアイテムの要素（フィルタリングの対象）
  const targets = document.querySelectorAll(targetElements);
  //input 要素（ラジオボタン）に change イベントを設定
  for(let input_category of input_categories) {
    input_category.addEventListener('change',(e) => { 
      //アイテムの高さを更新
      resizeAllGridItems(); //削除しても問題なければ削除可能？
      for(let target of targets) {
        target.style.setProperty('display', 'block');
      }
      if( e.currentTarget.checked ) {
        if(e.currentTarget.value !== 'all') {
          //data-category 属性にこのラジオボタンの value 属性の値が含まれていないものを全て取得して非表示に
          const not_checked_categories = document.querySelectorAll(targetElements + ':not([data-category~=' + '"' + e.currentTarget.value + '"])');
          for(let not_checked_category of not_checked_categories) {
            not_checked_category.style.setProperty('display', 'none');
          }
        }
      }
    });
  }     
});
</script>

/* グリッドアイテム（masonry-item）にアニメーションを追加 */
.masonry-item {
  animation: checked_animation 0.4s ease-in-out both;
}
@keyframes checked_animation {
  0% {
  transform: translate(0, 300px);
  opacity: 0;
  }
  100% {
  transform: translate(0, 0);
  opacity: 1;
  }
}

const returnAnimation  = (animation_class, animation_name, animation_delay, translate_from_x, translate_from_y) => {
    const animation_rules = `.${animation_class}{animation: ${animation_name} 0.2s ease-in-out ${animation_delay} both;}@keyframes ${animation_name} {0%{transform: translate(${translate_from_x}, ${translate_from_y});opacity: 0;}100%{transform:translate(0, 0);opacity:1;}}`  
    return animation_rules;
  };

<div class="filter_wrapper"><!-- フィルタ用のマークアップ（前述の例と同じ） -->
  <input type="radio" id="all" name="categories" value="all" checked>
    <input type="radio" id="city" name="categories" value="city">
    <input type="radio" id="nature" name="categories" value="nature">
    <input type="radio" id="museum" name="categories" value="museum">
    <input type="radio" id="travel" name="categories" value="travel">
    <ol class="filters">
      <li><label for="all">All</label></li>
      <li><label for="city">City</label></li>
      <li><label for="nature">Nature</label></li>
      <li><label for="museum">Museum</label></li>
      <li><label for="travel">Travel</label></li>
    </ol>
</div><!-- フィルタ用のマークアップ（ここまで） -->
<div class="grid-wrapper">
  <!-- グリッドアイテム（figure 要素）に target クラスと data-category 属性を指定 -->
  <figure class="target wide" data-category="city museum"> 
    <a class="luminous" href="images/01.jpg">
      <img src="images/01.jpg" alt="sample image">
    </a>
    <figcaption>Photo 1</figcaption>
  </figure>
  <figure class="target tall" data-category="travel"> 
    <a class="luminous" href="images/02.jpg">
      <img src="images/02.jpg" alt="sample image">
    </a>
    <figcaption>Photo 2</figcaption>
  </figure>
  
  ・・・中略・・・
  
  <figure class="target wide" data-category="nature travel">
    <a class="luminous" href="images/12.jpg">
      <img src="images/12.jpg" alt="sample image">
    </a>
    <figcaption>Photo 12</figcaption>
  </figure>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  padding: 15px;
}
.grid-wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  max-width: 1200px; /* 最大幅を指定 */
  margin: 0 auto;
}
.grid-wrapper .wide {
  grid-column: span 2;
}
.grid-wrapper .tall {
  grid-row: span 2;
}
.grid-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}
.grid-wrapper figure {
  position: relative;
  overflow: hidden;
}
.grid-wrapper figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s; /* 拡大表示のアニメーション */
}
.grid-wrapper figure img:hover {
  transform: scale(1.1);
}
.grid-wrapper figure figcaption {
  position: absolute; /* 絶対配置 */
  bottom: 0;  /* 垂直方向の位置 */
  text-align: center; /* 中央寄せ */
  color: #fff;
  width: 100%;
  background-color: rgba(0,0,0,0.65);
  line-height: 1.8;
  color: #fff;
  transform: translateY(2rem);  /* 垂直方向に 2rem 下に移動して隠しておく */
  transition: transform 0.3s; /* 垂直方向移動のアニメーション */
  font-size: .875rem;
}
.grid-wrapper figure:hover figcaption {
  transform: translateY(0px);  /* ホバー時に本来の位置に戻して表示 */
}
  
/* フィルタリング用スタイル（前述の例と同じ） */
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.filters {
  text-align: center;
  margin-bottom: 2rem;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.5s;
  color: #333;
  background-color: #fff;
  border: 1px solid #333;
}
.filters label:hover {
  background-color: #222;
  color: #fff;
}
[value="all"]:checked ~ .filters [for="all"],
[value="city"]:checked ~ .filters [for="city"],
[value="nature"]:checked ~ .filters [for="nature"], 
[value="museum"]:checked ~ .filters [for="museum"], 
[value="travel"]:checked ~ .filters [for="travel"] {
  background: #222;
  color: #fff;
}

<script src="../luminous/luminous.min.js"></script> 
<script>
const luminousOpts = {
  caption: (trigger) => {
    //figcaption 要素を取得
    const figCaption = trigger.parentElement.querySelector('figcaption');
    if(figCaption !== null && figCaption.textContent !== '') {
      return figCaption.textContent;
    }else{
      if(trigger.querySelector('img').hasAttribute('alt')) {
        return trigger.querySelector('img').getAttribute('alt');
      }else{
        return '';
      }
    }
  },
}

// HTMLCollection（document が変更された時点で自動的に更新されるライブオブジェクト）を取得
const luminousGalleryElems = document.getElementsByClassName('luminous');
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
} 

//フィルタリング
window.addEventListener('DOMContentLoaded', () => {
  const input_categories = document.querySelectorAll("input[name=categories]");
  //フィルタのターゲットにグリッドアイテム（figure.target）を指定
  const targetElements = '.target';  
  //全てのグリッドアイテムの要素（フィルタリングの対象 = figure 要素）
  const targets = document.querySelectorAll(targetElements);
  for(let input_category of input_categories) {
    input_category.addEventListener('change',(e) => { 
      for(let target of targets) {
        target.style.setProperty('display', 'block');
        //Lightbox のクラス（.luminous）が削除されていたら追加
        if(!target.querySelector('a').classList.contains('luminous')) {
          target.querySelector('a').classList.add('luminous');
        }
      }
      if( e.currentTarget.checked ) {
        if(e.currentTarget.value !== 'all') {
          const not_checked_categories = document.querySelectorAll(targetElements + ':not([data-category~=' + '"' + e.currentTarget.value + '"])');
          for(let not_checked_category of not_checked_categories) {
            not_checked_category.style.setProperty('display', 'none');
            //対象外の要素の Lightbox のクラス（.luminous）を削除
            if(not_checked_category.querySelector('a').classList.contains('luminous')) {
              not_checked_category.querySelector('a').classList.remove('luminous');
            }
          }
        }
      }
    });
  }     
});
</script>

const returnAnimation  = (animation_class, animation_name, animation_delay, translate_from_x, translate_from_y) => {
  const animation_rules = `
.${animation_class} {
  animation: ${animation_name} 0.2s ease-in-out ${animation_delay} both;
}

@keyframes ${animation_name} { 
  0% {
  transform: translate(${translate_from_x}, ${translate_from_y});
  opacity: 0;
  }
  100%  {
  transform: translate(0, 0);
  opacity: 1;
  }
}`  
  return animation_rules;
};

<div class="filter_wrapper"><!-- フィルタ用のマークアップ（前述の例と同じ） -->
  <input type="radio" id="all" name="categories" value="all" checked>
    <input type="radio" id="city" name="categories" value="city">
    <input type="radio" id="nature" name="categories" value="nature">
    <input type="radio" id="museum" name="categories" value="museum">
    <input type="radio" id="travel" name="categories" value="travel">
    <ol class="filters">
      <li><label for="all">All</label></li>
      <li><label for="city">City</label></li>
      <li><label for="nature">Nature</label></li>
      <li><label for="museum">Museum</label></li>
      <li><label for="travel">Travel</label></li>
    </ol>
</div><!-- フィルタ用のマークアップ（ここまで） -->
<div class="grid-wrapper">
  <!-- グリッドアイテム（figure 要素）に target クラスと data-category 属性を指定 -->
  <figure class="target wide" data-category="city museum"> 
    <a class="luminous" href="images/01.jpg">
      <img src="images/01.jpg" alt="sample image">
    </a>
    <figcaption>Photo 1</figcaption>
  </figure>
  <figure class="target tall" data-category="travel"> 
    <a class="luminous" href="images/02.jpg">
      <img src="images/02.jpg" alt="sample image">
    </a>
    <figcaption>Photo 2</figcaption>
  </figure>
  
  ・・・中略・・・
  
  <figure class="target wide" data-category="nature travel">
    <a class="luminous" href="images/12.jpg">
      <img src="images/12.jpg" alt="sample image">
    </a>
    <figcaption>Photo 12</figcaption>
  </figure>
</div>

img {
  display: block;
  max-width: 100%;
  height: auto;
}
.masonry-wrapper {
  padding: 1.5em;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
.masonry-item {
  width: 90%;
  margin-bottom: 10px;
  background-color: #efefef;
}
@media screen and (min-width: 480px) {
  .masonry-item {
    width: 49%;
  }
}
@media screen and (min-width: 768px) {
  .masonry-item {
    width: 32%;
  }
}
@media screen and (min-width: 962px) {
  .masonry-item {
    width: 24%;
  }
}
@media screen and (min-width: 1200px) {
  .masonry-item {
    width: 19%;
  }
}
.title {
  font-size: 16px;
  color: #999;
  text-align: center;
  margin: .5rem 0;
}
.desc {
  padding: .5rem;
  position: relative;
  overflow: visible;
  color: #aaa;
  font-size: 14px;
}
  
/* フィルタリング用スタイル（前述の例と同じ） */
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.filters {
  text-align: center;
  margin-bottom: 2rem;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.5s;
  color: #333;
  background-color: #fff;
  border: 1px solid #333;
}
.filters label:hover {
  background-color: #222;
  color: #fff;
}
[value="all"]:checked ~ .filters [for="all"], [value="city"]:checked ~ .filters [for="city"], [value="nature"]:checked ~ .filters [for="nature"], [value="museum"]:checked ~ .filters [for="museum"], [value="travel"]:checked ~ .filters [for="travel"] {
  background: #222;
  color: #fff;
}

<script src="src/imagesloaded.pkgd.min.js"></script> 
<script src="src/masonry.pkgd.min.js"></script> 
<script>
//グリッドコンテナの要素（クラス masonry を指定した div 要素）
const elem = document.querySelector('.masonry');
//オプションを別途定義
var masonryOptions = {
  columnWidth: '.masonry-item',
  itemSelector: '.masonry-item',
  gutter: 10,
  percentPosition: true
};
//基準となる最低幅
const min_width = 480;
//プラグインがアクティブかどうか
let isActive = false;
//プラグイン Masonry のインスタンスを代入する変数
let msnry = null;

//画面幅が 480px 以上であればプラグインを初期化
if(window.innerWidth >= min_width) {
  msnry = new Masonry( elem, masonryOptions);
  imagesLoaded( elem ).on( 'progress', () => {
    msnry.layout();
    isActive = true; //プラグインはアクティブ  
  });  
}

//画面幅によりプラグインを無効化または有効化する関数
const update_masonry = () => {
  // 表示領域の横幅
  const windowWidth = window.innerWidth; 
  // プラグインがアクティブで画面幅が 480px 未満の場合 
  if ( isActive && windowWidth < min_width ) {
    msnry.destroy();
    isActive = false;
  } else {
    // プラグインがアクティブでない場合
    if(!isActive) {
      msnry = new Masonry( elem, masonryOptions);
      msnry.layout();
      isActive = true;
    }
  } 
}

//リサイズ時の処理
let timer = false;
window.addEventListener('resize', () => {
  if (timer !== false) {
    clearTimeout(timer);
  }
  //リサイズ操作が終了した時点で処理を実行
  timer = setTimeout( () => {
    update_masonry();
  }, 200);
});
  
//フィルタリング
window.addEventListener('DOMContentLoaded', () => {
  const input_categories = document.querySelectorAll("input[name=categories]");
  //フィルタのターゲットにグリッドアイテムを指定
  const targetElements = '.masonry-item';  
  //グリッドコンテナのクローン（コピー）を収容する div 要素を作成
  const clone_div = document.createElement('div');
  // id を指定
  clone_div.id = 'clone_div';
  // インラインスタイルで非表示に
  clone_div.style.display = 'none';
  //グリッドコンテナのクローン
  const masonry_clone = document.getElementsByClassName('masonry')[0].cloneNode(true);
  //作成した div 要素にクローンを追加
  clone_div.appendChild(masonry_clone);
  //グリッドコンテナの親要素（.masonry-wrapper）を取得
  const masonry_wrapper = elem.parentElement;
  // または document.getElementsByClassName('masonry-wrapper')[0]; など
  //グリッドコンテナの親要素にクローンを格納した div 要素を追加
  masonry_wrapper.appendChild(clone_div);
  //フィルタの対象の要素（グリッドアイテム）を取得
  const targets = document.querySelectorAll(targetElements);
  //フィルタの項目が選択された際のイベントを登録
  for(let input_category of input_categories) {
    input_category.addEventListener('change',(e) => {
      //グリッドコンテナのクローンをコピー（クローンのクローン）
      const clone_clone = document.querySelector('#clone_div .masonry').cloneNode(true);
     //Masonry を破棄
      msnry.destroy();
      //グリッドコンテナ（.masonry）をクローンに置き換え
      const original_masonry = document.getElementsByClassName('masonry')[0];
      masonry_wrapper.replaceChild(clone_clone, original_masonry);
      // 上記は以下のように記述できるが、HTML の構造が変化すると機能しなくなる
      //masonry_wrapper.replaceChild(clone_clone, masonry_wrapper.firstElementChild.nextElementSibling);
      //コンテナを入れ替えたので再度 Masonry を初期化してレイアウトを実行
      msnry = new Masonry( document.querySelector('.masonry'), masonryOptions);
      imagesLoaded( elem ).on( 'progress', () => {
        msnry.layout();
        isActive = true;
      });  
      //フィルタの項目が選択された場合の処理
      if( e.currentTarget.checked ) {
        if(e.currentTarget.value !== 'all') {
          const not_checked_categories = document.querySelectorAll(targetElements + ':not([data-category~=' + '"' + e.currentTarget.value + '"])');
          for(let not_checked_category of not_checked_categories) {
            //選択されていない項目を Masonry から削除
            msnry.remove( not_checked_category );
          }
        }
        //Masonry をレイアウト
        msnry.layout();
      }
    });
  }     
});
</script>