Magic Grid
핀터레스트에서 사용하는 임의의 높이를 가진 레이아웃
Atricleapp 시작
1.
python manage.py startapp articleapp
2.
setttings.py>INSTSALL_APP에 ‘articleapp’ 등록
3.
urls.py 생성 후 app_name = ‘articleapp’, urlpatterns등록
4.
path('list/', TemplateView.as_View(template_name='articleapp/list.html'), name='list')
5.
template/articleapp 만든 후 , 디렉토리 안에 list.html 만들어주기
list.html에 magicgrid html 부분 넣어주기
6.
static dir에 js 폴더를 만든 후, magicgric.js 파일을 만든 후
magicgird.js 내부에 magicgrid js 코드 넣어주기
7.
list.html의 하단에 <script src=”{% static ‘js/magicgrid.js’ %}></script> 라고 입력해 magicgrid를 불러온 후, 상단에 {% load static %}으로 static을 불러와준다
Lorem Picsum
:특정 url로 요청을 보내면, 높이와 너비르 지정해 랜덤한 사진을 보내준다
<div class="container">
<div class="item1">
<img src="https://picsum.photos/200/300" alt="">
</div>
...
HTML
복사
상단 style의 height를 지워주고, .container img { height: 100%; } 로 준다.
.containser img {
height: 100%;
border-radius: 1rem;
}
HTML
복사
만든 뷰에서 사진이 자동적으로 레이아웃이 되지 않는다. 사진이 로딩되는 시간이 있어서 그런것인데, 나중에 이미지가 완성이 되어서 그리드의 포지션에 반영이 되지 않아서 그렇다.
var masonrys =document.getElementsByTagName("img");
for (let i = 0; i < masonrys.length; i++) {
masonrys[i].addEventListener('load', function () {
magicGrid.positionItems();
}, false);
}
JavaScript
복사
이 모든 html 태그 내에 이미지가 로드가 됐을 때, 매직그리드를 다시 포지셔닝을 하라는 코드