在 space 可用时浮动图像

Question

我正在制作一个类似于 Google 照片的网站，其中有一个主页，我在其中显示用户上传的所有照片，它看起来像这样：-

问题是当连续有一张大照片时（比如第一行中间的图像很大），因为该图像下一行的图像有巨大的差距。如果它存在，有什么方法可以自动填补空白！这是代码：-

（我正在使用 Django 从服务器获取图像）

HTML:-

    <div class="container">
        <div class="upload" id="upload" style="display: none">
            <form action="/upload" method="post" enctype="multipart/form-data">{%csrf_token%}
                <input type="file" name="image">
                <button type="submit" class="btn btn-outline-danger">Upload</button>
            </form>
        </div>
        {%for date, image_list in image_day reversed%}

        <div class="home">
            <h4 class="date">{{date}}</h4>
        </div>

        <div class="image-gallery">
            <div class="row">
                {%for i in image_list reversed%}
                <div class="col-md-4" style="padding-top: 1%; padding-bottom: 1%;">
                    <img class="img1" id="img1" src="/media/{{i.image}}" style="width: 100%;"
                        onclick="popup('/media/{{i.image}}')">
                </div>
                {%endfor%}


            </div>
        </div>
        {%endfor%}
    </div>

CSS:-

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        .home {
            font-family: 'Poppins';
            padding-top: 3%;
        }

        .img1 {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }

        .image-gallery {
            padding-top: 1%;
        }

        .img1:hover {
            opacity: 0.9;
        }

        .upload {
            padding-top: 3%;
        }
    </style>

如果您需要更多信息，请告诉我！

Answer 1

您可以使用 CSS column-count 制作砖石画廊。或者，您可以使用砌体脚本。

CSS 示例：

.gallery {
  column-count: 3;
  column-gap: 10px;
}

.item {
  width: 100%;
  margin-bottom: 10px;
}

img {
  width: 100%;
  display: block;
}

  
  <div class="gallery">
    
    <div class="item">
      <img src="https://picsum.photos/200/200" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/200" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/100" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/100" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/200" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/150" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/150" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/150" alt="">
    </div>
    
  </div>

结果：

在 space 可用时浮动图像

Float Images when their is space available

html

css

web-deployment

HTML:-

CSS:-