MagicGrid 소개 및 Articleapp 시작 (작정하고 장고 34강)

34강

핀터레스트의 카드형 레이아웃을 구현하기 위한 라이브러리, MagicGrid를 소개하고, 저희 사이트에 ArticleApp 내부에 간단히 구현해본다.

python manage.py startapp articleapp

setting, urls에 추가

static 폴더에 js 폴더 추가하고 내용 복붙하기
https://github.com/e-oj/Magic-Grid/blob/master/dist/magic-grid.cjs.js
ㄴ> js 코드 링크

let magicGrid = new MagicGrid({
  container: '.container',
  animate: true,
  gutter: 30,
  static: true,
  useMin: true
});

magicGrid.listen();

코드 추가

var masonrys = documnet.getElementsByTagName("img");

for (let i = 0; i < masonrys.length; i++) {
  masonrys[i].addEventListener('load', function () {
    magicGrid.positionItems();
  }, false)
}

모든 html 태그 내에 있는 이미지에 대해서 이미지가 로드가 되었을 때 magicGrid를 다시 포지셔닝하는 것