【JavaScript】Pinterest風、グリッドレイアウトライブラリ「Shuffle.js」

2025年03月03日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はオシャレなサイトで使えそうなライブラリを紹介します！

実装例

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

HTML例

まず＜script＞タブの直前に下記を記述してください。

<script src="https://cdn.jsdelivr.net/npm/shufflejs@5"></script>

そうしたらメインの下記を記述してください。

<div class="js-grid">
  <div class="grid-item">
    <img src="./cow.jpg" alt="">
    <p>Item 1</p>
  </div>
  <div class="grid-item">
    <img src="./pig.jpg" alt="">
    <p>Item 2</p>
  </div>
  <div class="grid-item">
    <img src="./chicken.jpg" alt="">
    <p>Item 3</p>
  </div>
  <div class="grid-item">
    <img src="./cow.jpg" alt="">
    <p>Item 1</p>
  </div>
  <div class="grid-item">
    <img src="./pig.jpg" alt="">
    <p>Item 2</p>
  </div>
  <div class="grid-item">
    <img src="./chicken.jpg" alt="">
    <p>Item 3</p>
  </div>
</div>

CSS例

.grid-item{
  width: calc(100% / 3 - 15px);
  background-color: #d8d8d8;
  margin: 5px;
}
.grid-item img{
  width: 100%;
  display: block;
}
.grid-item p{
  padding: 20px;
}

JavaScript例

document.addEventListener("DOMContentLoaded", function() {
  const Shuffle = window.Shuffle;
  const grid = document.querySelector('.js-grid');
  const shuffleInstance = new Shuffle(grid, {
    itemSelector: '.grid-item',
    sizer: null, 
  });
});