HTML, CSS 随机大小的自对齐公正的图片库。

Question

我正在创建一个动态大小的图片库，PHP和HTML如下。

<?php
$dirname = "Pictures/";
?>

<ul class="gallery">

<?php

$images = glob("" . $dirname . "*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}", GLOB_BRACE);

foreach ($images as $image) 
{
    $File = pathinfo($image);
?>

<li class="container">
    <a href="<?php echo $url.$image; ?>"><img src="<?php echo $url.$image; ?>" alt=""></a>
</li>

<?php
}
?>
</ul>

我的css如下。

.gallery 
{
    line-height: 0;
    -webkit-column-count: 5;
    -webkit-column-gap:   5px;
    -moz-column-count:    5;
    -moz-column-gap:      5px;
    column-count:         5;
    column-gap:           5px;  
    align-content: stretch;
    list-style: none;
}

.gallery li
{
    width: 100% !important;
    height: auto !important;
    margin-bottom:5px!important;
    border:1px solid #dfe1e5;
}

.container img
{
    width: 100% !important;
    height: auto !important;
} 

到目前为止，我的这段代码不允许我在随机显示图片的同时，对底部的行进行调整，使整个图库更多的是矩形，如下所示。

正义的随机行

另外，这段代码是分栏的，我希望的是一个更随机的流程，而不是把东西分成几栏。

谁能给点建议，有什么更好的方法，只用CSS和HTML就能实现一个随机大小的自对齐对齐的图片库的目标。

我创建了一个JSFiddle https:/jsfiddle.netawhe61kg 为那些要求的人。

顺便说一下，我想实现的至少是像unegallery主题 https:/unitegallery.netindex.php?page=tiles-justified。但尽可能不使用Javascript。我不想使用这个图库的原因是我已经尝试过了，它很容易出问题。虽然它是一个美丽的设计，我想用CSS和HTML复制。

** 以下是已修复的问题 **。

我几乎可以单独用CSS flex boxes实现单元图库行为，如下图。

.gallery 
{
    min-width:100%;
    max-width:100%;
    list-style: none;
    font-size:0;
    display:flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: stretch;
}

.gallery li
{
    flex-direction: row;
    flex:20 20 auto;
    width: auto !important;
    height:200px;
    max-width:400px; <-----------causes the problem, remove and its fixed
    margin-bottom:5px!important;
    border:1px solid #dfe1e5;
}

.container img
{
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
}

虽然我目前遇到了一个问题，在响应式设计模式下，顶行在某些宽度下不能正确拉伸。

**已修复 **。

下面是一个JSFiddle，其中有flex box图片库和导致问题的元素被注释出来。https:/jsfiddle.netag9s2qdt.

Answer 1

你链接到的页面(此处)只是用行代替列。如果你只用HTML和CSS就想让图片排成一行，你可以这样做。

.justified {
  text-align: justify;
}

.justified:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.justified img {
  height: 100px;
  display: inline-block;
}

<div class="justified">
  <img src="https://cdn.pixabay.com/photo/2016/11/19/18/57/godafoss-1840758_1280.jpg" />
  <img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="">
  <img src="https://i.picsum.photos/id/1013/4256/2832.jpg" alt="">
  <img src="https://i.picsum.photos/id/1009/5000/7502.jpg" alt="">
  <img src="https://i.picsum.photos/id/1006/3000/2000.jpg" alt="">
  <img src="https://i.picsum.photos/id/1005/5760/3840.jpg" alt="">
  <img src="https://i.picsum.photos/id/1003/1181/1772.jpg" alt="">
  <img src="https://i.picsum.photos/id/1002/4312/2868.jpg" alt="">
  <img src="https://i.picsum.photos/id/1000/5626/3635.jpg" alt="">
  <img src="https://i.picsum.photos/id/10/2500/1667.jpg" alt="">
  <img src="https://i.picsum.photos/id/100/2500/1656.jpg" alt="">
</div>

当然，每张图片之间的空隙可能会很大，而且你要负责确保最后一行的图片数量不会太多。JavaScript会对计算有很大的帮助，以便在这里真正得到一个好的结果，但这是每个人自己的事情。