如何将不同大小的图片创建成网格？

Question

我想创建一个图片网格，其中每一行的所有图像具有相同的高度，且每行使用相同的宽度。如何实现这一点？有哪些库可以帮助我？

- serge

---

你能否直接链接到一张图片或截图呢？我无法看到你在链接的页面上想要的效果。你是指谷歌图片搜索结果如何布局，以便不同尺寸的图片适应一个网格吗？ - danijar

look - serge

好的，我已经在你的问题中包含了它。 - danijar

Answer 1

这种类型的网格很难自己制作，所以最好不要重复造轮子，使用互联网上由优秀人士创建的神奇库。

查看这些链接，它们非常适合您要寻找的内容-- >

1. http://masonry.desandro.com/
2. http://css-tricks.com/seamless-responsive-photo-grid/

此外，这个链接http://www.jqueryscript.net/tags.php?/grid%20layout/有许多这些图像网格视图库，可能会有用..

---

CSS技巧链接实际上是一个不需要库的简单实现。想法是将图像宽度设置为100％并将空间分成列。

以下是从前面的链接提取的代码片段：

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

photos.innerHTML = allImages

.snippet-result-code {
  height: 500px
}

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

<section id="photos"></section>

- Vishal Nair

---

其实自己做这件事并不难（我并不是在建议你这么做）。创建五列，均匀地填充它们的图片，使其大小调整以适应列宽。甚至不需要 JavaScript。 - danijar

@danijar 你能再多说一些吗？ - serge

@serge 你想要的网格布局有点复杂，因为它由行而不是列组成。像Pinterest上那样，列通常不需要水平对齐。但你想要适合整个宽度的行，这只能通过裁剪图像来实现。 - danijar

Answer 2

CSS Grid框架很有效。您可以在CSS Tricks网站上找到更详细的解释。这是一个适用于上面图片的示例（这是我的JSFiddle结果）。

/*grid container*/

 .container {

          display: grid;
          padding:60pt;
          grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 25%;  
          /*adjust outer values if you want less padding on the sides, 
           in jsfiddle I used 5% */
          grid-template-rows: 10% 300pt 250pt 10%;
          grid-column-gap: 10px;
          grid-row-gap: 5px;

        }

    .container div img { width: 100%;
                         height: 100%;
                         }

/*image div classes*/

    .main_1 {
      grid-area: main_1;
      grid-column:2/5;
      grid-row: 2/3; 
    }

    .main_2 {

      grid-area: main_2;
      grid-column:5/8;
      grid-row: 2/3;
    }

    .main_3 {
      grid-area: main_3;
      grid-column:8/11;                                          
      grid-row: 2/3;
    }

    .main_4 {
      grid-area: main_1;
      grid-column:2/4;
      grid-row: 3/4;
    }

    .main_5 {
      grid-area: main_2;
      grid-column:4/7;
      grid-row: 3/4;
    }

    .main_6 {
      grid-area: main_3;
      grid-column:7/11;                                           
      grid-row: 3/4; 
    }

- Programina

---

如果你有一堆图片（比如一千张），这就变得不可能了。 - Ulysse BN