Isotope 사용하기

출처 : Do it! 인터랙티브 웹 페이지 만들기

//HTML에 작성
<script src="js/isotope.pkgd.min.js"></script>

//script에서 작성
window.addEventListener("load", () => {         //window가 load될 때 수행
  const grid = new Isotope("section", {  //배치할 요소를 감싸고 있는 부모 요소명
    itemSelector: "article",     //배치할 요소명
    columnWidth: "article",      //너비값을 구하는 요소명
    transitionDuration: "0.5s",  //화면 재배치 시 걸리는 시간
  });
  
  //grid에 저장된 값으로 재정렬
  grid.arrange({
    filter: ".odd"    //odd 클래스를 가진 것만 정렬
  });
});