HTML、CSS 随机大小自对齐对齐的图片库答案

【问题标题】：HTML, CSS Random Sized Self Aligning Justified Image GalleryHTML、CSS 随机大小自对齐对齐的图片库
【发布时间】：2020-09-09 22:46:14
【问题描述】：

我正在创建一个图片库，其中包含动态大小的图片，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;
}

到目前为止，我的这段代码不允许我在对齐底行的同时随机显示图像，因此整个画廊更加矩形，如下所示；

Justified Random Rows

另外，这段代码是分列的，我想要的是一个更随机的流程，而不是把事情分成几列。

有人可以提供一些更好的建议，以实现仅使用 CSS 和 HTML 实现随机大小的自对齐对齐图片库的目标。

我为请求的人创建了一个 JSFiddle https://jsfiddle.net/awhe61kg/。

顺便说一句，我想至少实现类似 unitegallery 主题 https://unitegallery.net/index.php?page=tiles-justified，但尽可能不使用 Javascript。我不想使用这个画廊的原因是因为我已经尝试过它并且它有故障。虽然这是一个漂亮的设计，但我想在 CSS 和 HTML 中复制它。

** 下方已修复问题 **

我几乎可以单独使用 CSS flex box 实现统一的行为，如下所示；

.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，导致问题的元素已注释掉 https://jsfiddle.net/ag9s2qdt/。

【问题讨论】：

所以你有一堆你想要显示的图像，目标是让它们在浏览器窗口中边缘到边缘没有间隙，对吗？
我创建了这个 JSFiddle jsfiddle.net/awhe61kg，它显示了我所拥有的，因此我想要保留的图像之间的差距。我只是不想要列，我希望底部像i.stack.imgur.com/jK6UZ.png 一样平坦。我在想也许将 li 向左浮动，然后试图找出最下面一行...但我不想走错路，所以我向 CSS ninjas 寻求建议。
我对PHP不是很了解，我可以帮你写一些js代码
我试图避开 js，我对 PHP 和 HTML 很好，这是我需要建议的 CSS...但是如果 js 是唯一的出路，那么我愿意学习...
我知道足够多的 JS 来对事物进行逆向工程并使其正常工作......

标签： html css dynamic responsive image-gallery

【解决方案1】：

您链接到的页面 (here) 只使用行而不是列。如果您想要仅包含 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 将极大地帮助计算在这里实际获得一个好的结果，但对每个人来说都是他自己的。

【讨论】：