ListView 이후 사진 컨테이너 크기가 고정적입니다.

작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지

ListView, Pagination 소개 및 적용

해결된 질문

작성

288

list.html

---------------
{% extends 'base.html' %}

{% load static %}

{% block content %}

    <style>
        .container div {
          width: 250px;
          height: 400px;
          background-color: antiquewhite;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 1rem;
        }

        .container img {
            width : 100%;
            border-radius: 1rem;
        }


    </style>

    {% if article_list %}
    <div class="container">
        {% for article in article_list %}
            <a href = "{% url 'articleapp:detail' pk=article.pk %}">
                {% include 'snippets/card.html' with article=article %}
            </a>
        {% endfor %}
    </div>

    <script src = "{% static 'js/magicgrid.js' %}"></script>
    {% else %}
    <div class = "text-center">
        <h1>No Articles YET! </h1>
    </div>
    {% endif %}

    {% include 'snippets/pagination.html' with page_obj=page_obj %}

    <div style = "text-align: center">
        <a href = "{% url 'articleapp:create' %}" class ="btn btn-dark rounded-pill col-3 mt-3 mb-3">
            Create Article
        </a>
    </div>



{% endblock %}
--------------

## magicgrid.js 에 아래 구문도 추가하였습니다.

.
.기존의 github magic-grid.cjs.js 코드
.
let magicGrid = new MagicGrid({
  container: '.container',
  animate: true,
  gutter: 12,
  static: true,
  useMin: true
});

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

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

magicGrid.listen();





위와 같이 사진의 크기에 따라 컨테이너가 바뀌어야하는데 
바뀌지 않고 고정적입니다.
강사님 깃허브도 봤는데 문제가 뭔지 잘 모르겠습니다.
다른 분 글 보면서 개발자도구 disable 캐시도 적용해봤는데
해결되지 않았습니다.