Позиционирование объектов Django, с шаблоном для тегов цикла * Борьба с воспроизведением push and pop местоположения фотографии в Instagram.

У меня возникают трудности с позиционированием расположения фотографий после того, как пользователь размещает фотографию, где (Фото фиолетового геймбоя) находится там, где (Фото особняка), а где (Фото игрока в американский футбол) находится там, где (Фото фиолетового геймбоя), как в профиле Instagram. Где самые последние фотографии идут в левом верхнем углу, а последние размещенные фотографии сдвигаются в правый нижний

Функция проверяет первую итерацию цикла for и создает строку и столбец для первой фотографии, фотография игрока в американский футбол является первой опубликованной фотографией, затем движется дальше, пока не появится четвертая фотография. Вместо того чтобы переместить самую старую фотографию в новую строку и переместить самую новую фотографию в начало существующей строки. Он сохраняет местоположение первой фотографии и создает новый ряд для последней фотографии.

Profile_Page.html

    <!-- -----------------------------------------ALBUM SECTION---------------------------------------- -->
    <div class="album-section">
      <h2>Albums</h2>
      {% for x in img %}
          {% if forloop.first %}
          <div class="row ">{% endif %}
              <div class="col-4 col-4 col-4" >
                  <div class="text-center mt-2">
                      <a href="{% url 'single_page' x.id %}" ><img src="{{x.file.url}}" href="{% url 'single_page' x.id %}" height="100%" width="100%"  class="myImg"></a>
                  </div>
              </div>
              {% if forloop.counter|divisibleby:3 %}
          </div>

          <div class=row>{% endif %}
              {% if forloop.last %}
          </div>{% endif %}
      {% endfor %}
    </div>

Style.css

.row {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
}

enter image description here

Вернуться на верх