Question

我从这段代码开始：

        {% for award in data.profile.awards %}
            <img src="media/{{ award.Medals.ribbon }}">
            {% if forloop.counter|divisibleby:3 %}
                <br />
            {% endif %}
        {% endfor %}

我的问题是它从上到下。这意味着它产生前三个，然后是休息，然后是另外三个，并从那里重复。

我需要的是自下而上。在我的情况下，如果有4张图片，我想要1在顶部，3在底部。如果有8个，则顶部有2个，中间有3个，底部有3个。我该怎么做？

感谢。

Answer 1

您可以尝试反转循环并从结束开始计数，如下所示：

{% if forloop.revcounter|divisibleby:3 %}
    <br>
{% endif %}

因此，如果您有10张图像，将显示1张图像，然后条件将插入中断，并且每3张图像后将发生中断。希望它有所帮助！

Answer 2

我不太了解django模板语言，所以这里是纯粹的js，也许你可以翻译它：

var total_cells = 8;
var columns = 3;
var remainder = total_cells % columns;
for(var i=1;i<=total_cells;i++){ //starting from 1 similar to django's forloop.counter
    console.log('<img>');
    if((columns - remainder + i) % columns == 0){
        console.log('<br>')
    }
}

我们的想法是计算总细胞的余数除以列数，其中8为2，然后在每个第3个位置插入休息符，而不是每个(3-remainder+1)个位置。

如何在Django中自下而上堆叠图像

2 个答案: