在网格中排列高度不同的图片

Question

在网格中排列高度不同的图片

htmlcss

3

我需要按行显示10张图片，例如：

1 2 3 4

5 6 7 8

9 10

(数字代表图片)

我希望在这些图片之间去除任何白色空格。

目前，我正在使用CSS的column-count属性，但是图片仍然在行之间有间隙。

如何消除这个间隙？

(注：问题在于所有图片的高度都不同，因此每行图像的占用面积取决于该行最高图像的高度)

我想仅使用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>

当前结果：

期望结果：

- S K

请分享您目前设计的 HTML 和 CSS。 - Diego Fortes

@jhpratt 请查看更新的描述。 - S K

你应该寻找砌体布局，因为这不是网格。 - jhpratt

@jhpratt 这可以实现吗？ - S K

@jhpratt，你能帮忙吗？因为我找不到任何示例来执行这样的行为。 - S K

显示剩余8条评论

4个回答

3

你可以使用 masonry.js 来实现此功能。

步骤1：在页面中链接jQuery和masonry。
步骤2：将所有需要在网格中显示的图片分别用不同高度的div覆盖，并给这些图片统一的类名，然后应用到这些图片的父元素上。
步骤3：将下面的代码放入JS文件中。

代码：

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

example :

$( 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>

- Kamalesh M. Talaviya

不错！但是 OP 表示他想要一个仅使用 CSS 的解决方案。 - Diego Fortes

我为此道歉。 - Kamalesh M. Talaviya

0

#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;  
}

- hotProspect

欢迎来到StackOverflow。虽然您的代码片段可能回答了问题，但提供有关为什么和/或如何工作的附加上下文可以提高其长期价值。 - Sven Eberth

0

.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的示例：

- Diego Fortes

不行。如果你这样写 img{max-width:250px; width:100%}; 它会强制所有图片的宽度都为250像素，而不考虑它们本来的宽度。 - Diego Fortes

抱歉，我的意思是它只能处理相同高度的图像吗？ - S K

不行。您可以自己尝试。但确保向figure添加CSS属性vertical-align，以便它可以在底部、顶部或任何位置对齐。 - Diego Fortes

你是否想要实现砖石效果？https://www.beacontechnologies.com/blog/2016/11/pure-css-masonry-layout/ - Diego Fortes

瀑布流布局中，顺序是否仍按行排列？ - S K

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Syam Pillai · Accepted Answer

你可以尝试使用 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>