카드형 레이아웃을 만들어 주기 위해 사용할 JS 라이브러리 Magic Grid에 대해 살펴보기

MagicGrid 소개

• MagicGrid github : https://github.com/e-oj/Magic-Grid

• JSFiddle : https://jsfiddle.net/eolaojo/4pov0rdf/
  파라미터를 바꿔보는등 어떻게 MagicGrid가 돌아가는지 알 수 있음
  

articleapp 만들기

1. python manage.py startapp articleapp

2. settings.py -> installed_apps, urls.py -> articles 경로 추가

3. articleapp-> urls.py 만들기

test만 해볼것이기 때문에 TemplateView로 만들기(TemplateView는 template만 지정해주면 나머지는 알아서 만들어줌)

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('list/', TemplateView.as_view(template_name='articleapp/list.html'), name='list')
]

4. list.html 만들기

4-1 MagicGrid에 있었던 코드 복사 붙여넣기

{% extends 'base.html' %}
{% load static %}

{% block content %}
    <style>
    .container div {
      width: 250px;
      background-color: antiquewhite;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1rem;
}
    .container img{
        width:100%;
        border-radius: 1rem;
    }
</style>
    <div class="container">
      <div class="item1">
          <img src="https://picsum.photos/200/300" alt="">
      </div>
      <div class="item2">
          <img src="https://picsum.photos/200/300" alt="">
      </div>
    </div>
    <script src="{% static 'js/magicgrid.js' %}"></script>
{% endblock %}

script에서 source연결해주기. static을 사용했기때문에 load static해줌

4-2 MagicGrid구성하기 위한 js 파일작성

• 위에 있는 MagicGrid github에서 dist->제일위에 있는 js파일 복사
• static -> js디렉터리생성 후 -> magicgrid.js파일 생성 후 붙여넣기
  (마지막에있는 module.exports = MagicGird; 는 다른 프레임워크에서 필요한 것이므로 삭제)
• MagicGrid 홈페이지에 js부분 복사후 붙여넣기

배경에 임시로 이미지 넣기

Lorem Picsum : https://picsum.photos/
특정 url로 요청을 보내면 랜덤한 이미지를 제공해줌

• style일부 수정
  사진꽉채우기

자동적으로 레이아웃 되지 않음
why? 사진이 로딩이 되는 시간 때문에 js코드가 끝났는데 나중에 이미지가 로딩이 완료되서 적용이 안됨.
Answer : js파일에 추가

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

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

masonrys : 레이아웃 형태(벽돌처럼 쌓아나간다)
masonrys라는 변수에 html안에 있는 img라는 태그를 가진것들을 모두 가져옴.
그것에 대해 for문을 돌림.
masonrys에서 하나하나 마다 addEventListener를 이용해서 로드가 되었을 때 function을 넣어서 실행시켜 주는데, 그 function이 magicGrid.positionItems().

요지 : 이 모든 html내에 있는 img에 대해서 img가 로드가 되었을때 magicGrid를 다시 position하라는 EvenLister.

---