Django图像网格库

时间:2017-12-05 22:01:22

标签: python html django

我正在尝试在我的Django网站上设置一个类似于pinterest.com的网格库。

我有以下HTML代码:

<div class="row text-center text-lg-left">
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-4 h-100">
        {% for img in imgs %}
        <img src="/static/img/{‌{ img }}" class="img-thumbnail" alt="">
        {% endfor %}
      </a>
    </div>
  </div>

这是我的views.py

def gallery(request):
    path = "C:/Users/fela/Pictures/"
    img_list = os.listdir(path)
    return render(request, 'gallery.html', {'imgs': img_list})

上面的代码逐行显示结果,而不是彼此相邻。它每行显示一个结果(图像)(https://image.ibb.co/bVAE9b/result_2.png)。

预期结果应与pinterest类似,它应该是相邻的,以填满屏幕。

我尝试过使用bootstrap 4和bootstrap 3,结果相同。

2 个答案:

答案 0 :(得分:0)

我能够用另一种方法搞清楚。这是代码,以防它帮助其他人。

 <div style="width:100%">
  {% for img in imgs %}
      <div style="float:left; width:200px; height:200px;">
          <img src="/static/img/{{ img }}" class="img-thumbnail" alt="">
      </div>
  {% endfor%}
  </div>

答案 1 :(得分:0)

它应该是这样的

<div class="row">
    {% for img in imgs %}
        <div class="col-lg-3 col-md-4 col-xs-6">
          <a href="#" class="d-block mb-4 h-100">
            <img src="/static/img/{‌{ img }}" class="img-thumbnail" alt="">
          </a>
        </div>
    {% endfor %}
  </div>

您有一个div col-*,但每个图片都应该有自己的。