在网格中排列具有不同高度的图像答案

【问题标题】：Arrange images having different heights in a grid在网格中排列具有不同高度的图像
【发布时间】：2018-04-07 01:48:51
【问题描述】：

我必须按行显示 10 张图像。例如：

1 2 3 4

5 6 7 8

9 10

（数字为图片）

对于这些图片，我想删除 2 张图片之间的任何空白。

目前，我正在使用 CSS 的列数，但图像仍然存在行之间的间隙。

如何消除这种差距？

（P.s.：问题是所有图像都有不同的高度，所以发生的情况是图像所占据的区域取决于该行的最大图像高度）

我想只使用 CSS 解决它，而不使用任何 JS。

HTML 代码：

<div class="container photos-container">
  <img class="col-lg-3" src="1">
  <img class="col-lg-3" src="2">
  <img class="col-lg-3" src="3">
  <img class="col-lg-3" src="4">
  <img class="col-lg-3" src="5">
  <img class="col-lg-3" src="6">
  <img class="col-lg-3" src="7">
  <img class="col-lg-3" src="8">
  <img class="col-lg-3" src="9">
  <img class="col-lg-3" src="10">
</div>

当前结果：

预期结果：

【问题讨论】：

请分享您目前提出的 HTML 和 CSS。
@PossessWithin 代码已发布，顺便说一句，我尝试了 column-count 但它没有正确排序
@SK 您希望对不同高度的图像进行什么处理？你从来没有指定过。
@jhpratt 查看更新的描述
您应该寻找砖石布局，因为这不是网格。

标签： html css

【解决方案1】：

你可以使用 masonry.js 来获得这个

第 1 步：链接 jQuery，然后在您的页面中进行砌体
第 2 步：然后您只需要 div 覆盖的高度不同的图像，首先为要在网格中显示的所有图像赋予相同的类名，并将类应用于这些图像的父 div
第 3 步：将此代码放入您的 js 文件中

代码：

jQuery(document).ready(function(){
    $('#here_its_id_of_parant_div').masonry({
        itemSelector: '.Image_class',
        columnWidth: 70
    });
});

示例：

$( function() {

        $('#container').masonry({
            itemSelector: '.item',
            columnWidth: 70
        });

    });

body {
    font-family: sans-serif;
}

#container {
    border: 1px solid;
    padding: 5px;
}

.item {
    width: 60px;
    float: left;
    margin: 5px;
    background: #CCC;
}

.item.w2 {
    width: 130px;
}

.item.h2 {
    height: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.js"></script>
    <div id="container">
        <img class="item" src="https://fakeimg.pl/300/">
      <img class="item w2" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
       <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item w2" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item w2" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
    </div>

【讨论】：

不错！但 OP 表示他想要一个纯 CSS 的解决方案。
对此我深表歉意

【解决方案2】：

你可以试试css-grid。现在它已被所有浏览器广泛支持。

.container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
}
img{
  max-width: 100%;
}

<div class="container">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
</div>

编辑：如果要使用不同高度的图像，请使用inline-flex

.container{
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
  align-content: flex-start;
}
img{
  width: 25%;
  margin: 2px;
}

<div class="container">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="https://i.pinimg.com/originals/f7/7d/27/f77d274f5d81536c67d14fb8b93d3a29.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">


  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
    <img src="https://i.pinimg.com/originals/f7/7d/27/f77d274f5d81536c67d14fb8b93d3a29.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
</div>

【讨论】：

@SK 为什么不试试看呢？
这会按 html 的顺序逐列显示图像，我希望它是逐行的

【解决方案3】：

.container{
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    /* use font-size 0 to remove the 4px spacing naturally caused by display:inline-block on the children    */
    font-size: 0; 
}
.container figure{
    display: inline-block;
    max-width: 25%;
    width: 100%;
}
img{
    max-width: 100%;
}

<div class="container">
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
</div>

你需要使用 display:inline-block;在每个图像上和父级上的 font-size:0 删除间距。这是Codepen 上的示例：

【讨论】：

不。如果您喜欢img{max-width:250px; width:100%};，它将强制所有图像宽度为 250 像素，无论其自然宽度如何。
对不起，我的意思是它只适用于相同高度的图像吗？？
不。你可以自己试试。确保将 CSS 属性 vertical-align 添加到 figure，以便它可以在底部、顶部或任何您想要的位置对齐。
您是否要实现砌体效果？ beacontechnologies.com/blog/2016/11/pure-css-masonry-layout
顺序是否保持按行与砌体布局？

【解决方案4】：

您可以使用 flex 获得此显示。

但是你需要能够给容器一个确定的高度。（强制换行）。而且您将需要 3 个额外的元素来充当分隔符，以强制换行到正确的点。

如果这个要求对你来说没问题，那么解决方案是在容器上有一个弹性显示，带有方向列。并使用 order 样式根据 4 个循环重新排列项目，使用 nth-child：

.test {
  margin: 10px;
  width: 400px;
  border: solid 1px black;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 400px;
  padding-bottom: -100px;
}

.elem {
  margin: 5px;
  width: 20%;
}
.elema {
  height: 130px;
}
.elemb {
  height: 80px;
}
.elemc {
  height: 40px;
}

.elem:nth-child(4n + 1) {
  order: 10;
  background-color: tomato;
}
.elem:nth-child(4n + 2) {
  order: 20;
  background-color: yellow;
}
.elem:nth-child(4n + 3) {
  order: 30;
  background-color: lightblue;
}
.elem:nth-child(4n) {
  order: 40;
  background-color: lightgreen;
}

.sep {
  background-color: red; /* only for demo purposes */
  width: 2px; /* only for demo purposes */
  height: 100%;
}
.sep:nth-last-child(3) {
  order: 15;
}
.sep:nth-last-child(2) {
  order: 25;
}
.sep:nth-last-child(1) {
  order: 35;
}

<div class="test">
    <div class="elem elema">1</div>
    <div class="elem elemb">2</div>
    <div class="elem elemc">3</div>
    <div class="elem elemb">4</div>
    <div class="elem elemc">5</div>
    <div class="elem elema">6</div>
    <div class="elem elema">7</div>
    <div class="elem elemb">8</div>
    <div class="elem elemc">9</div>
    <div class="elem elemb">10</div>
    <div class="elem elemc">11</div>
    <div class="elem elema">12</div>
    <div class="sep"></div>
    <div class="sep"></div>
    <div class="sep"></div>
</div>

【讨论】：

【解决方案5】：

#images-wrapper {    
   line-height: 0;       
    -webkit-column-count: 5;    
    -webkit-column-gap: 0px;    
     column-count: 5;    
     column-gap: 0px;    
}  
#images-wrapper img {    
   width: 100% !important;    
   height: auto !important;  
}  
#images-wrapper{    
   display:inline-block;    
   margin-right: auto;    
   margin-left: auto;  
}

【讨论】：

欢迎来到 StackOverflow。虽然您的代码 sn-p 可能会回答这个问题，但提供有关您的代码 sn-p 为何和/或如何工作的额外上下文可以提高其长期价值。